Empty bound prop's cause a render exception

[jameshulse]

Vue.js version

2.2.4

Reproduction Link

https://jsfiddle.net/wwuyv17z/

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>)

[yyx990803]

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

[jameshulse]

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.

[yyx990803]

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