Vue: Empty bound prop's cause a render exception

Created on 14 Mar 2017 · 3Comments · Source: vuejs/vue

Vue.js version

2.2.4

Reproduction Link

Steps to reproduce

Pass nothing to a bound prop such as in the example: <test :user=""></test>

What is Expected?

At worst I would expect a warning in the console and no crash; at best I would expect the prop to come through with a null value to the component.

If it is agreed that a warning or null replacement should happen then I am happy to try and pull request this change myself.

What is actually happening?

An error occurs similar to:

[Vue warn]: Failed to generate render function:

SyntaxError: Unexpected token } in

with(this){return _c('div',{attrs:{"id":"app"}},[_c('test',{attrs:{"user":}})],1)}

(found in <Root>)

Source

jameshulse

👍1

All 3 comments

This is expected. You'd get a syntax error in JS too if you don't give an object field a value.

yyx990803 on 14 Mar 2017

👍1

Thanks for the response Evan.

I appreciate that. Once you get your head around the fact that bound props are basically javascript properties.

In that case, does Vue have a concept of error checking in dev mode? I just helped a beginner who ran in to this issue - I think they could have worked out the issue themselves if they had received something similar to:

[Vue warn] Bound property 'user' should not be empty on component 'test'

Again, happy to try and add this if you think it's useful.

jameshulse on 14 Mar 2017

👍1

Yes, this should be possible by checking value here. If you work on a PR, make sure to include an accompanying test case.

yyx990803 on 14 Mar 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings