Empty value for property causes template compilation to fail

[dwightwatson]

Vue.js version

2.0.3

Reproduction Link

https://jsfiddle.net/jt3hjuwg/

Steps to reproduce

Bind a prop that has an has an empty string as a value. If you were to provide a JSON object or the string null it would work, but if you use an empty string the template will fail to compile.

I'm not sure if this is expected behaviour in Vue 2 (it used to work in Vue 1). However, it feels a little counter-intuitive. For example, if I am providing content as a prop server-side I need to check if it exists and return the literal string null otherwise.

What is Expected?

The application still renders but the property becomes an empty string or null.

What is actually happening?

A warning is shown in the console and the application fails to render.

[Vue warn]: failed to compile template:

<review :review=""></review>

(found in root instance)

[fnlctrl]

Hi, thanks for filling this issue.

if you use an empty string the template will fail to compile.

You're not setting an empty string with <review :review=""></review>.
The correct way is: <review :review="''"></review>. Recall that v-bind expects javascript expressions. https://jsfiddle.net/fnlCtrl/jt3hjuwg/1/

For example, if I am providing content as a prop server-side I need to check if it exists and return the literal string null otherwise.

You only need to give it an empty string '', that's all.

[stephan-v]

Is there not a better way for Vue to deal with this? Or possible provide some better kind of error handling instead of dumping half the DOM inside the console when this happens?

[pxwee5]

@fnlctrl
How would you do it with Number props?