Vue: Empty value for property causes template compilation to fail

Created on 18 Oct 2016 · 3Comments · Source: vuejs/vue

Vue.js version

2.0.3

Reproduction Link

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)

Source

dwightwatson

👍4

Most helpful comment

@fnlctrl
How would you do it with Number props?

pxwee5 on 15 Apr 2018

👍5

All 3 comments

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.

fnlctrl on 18 Oct 2016

👍3

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?