Compilation fails on empty values on v-bind

[stephan-v]

Version

2.5.13

Reproduction link

https://jsfiddle.net/jt3hjuwg/

Steps to reproduce

I am referencing this closed issue:

#3969

I feel like something should be done about this issue because it has left me with some white pages along the way and without a clear error message. If you pass in a null value as a prop the entire compilation breaks down with your evaluated html simply being dumped into the console.

Is there really not a better way to handle this? Obviously a user should or could check for these values before actually showing the component but in large application a piece of data can sometimes be null either by accident or oversight

If nothing can be done about this could someone at least please explain why this happens because in my eyes a component not getting a prop does not justify the entire compilation failing.

What is expected?

The application should not fail compilation.

What is actually happening?

It fails compilation.

[kidplug]

You're not passing a null value as the :content - you're passing nothing.

To properly pass a JS null it should be:
:content="null"

Remember this is a "bound" attribute - the text inside the quotes is not used literally - its used as a JS expression, evaluated against the data/scope of the vue instance.

[posva]

Maybe a warning can be added in dev mode

[stephan-v]

@kidplug

In the example given you are correct, but what if I were to pass along a null value from something like PHP though? It still fails, it acts as If I have not given it anything at all and the entire compilation breaks.

<?php $nullValue = null; ?>

<review :content="<?= $nullValue ?>"></review>

This is the bothersome part right here, it is that I am actually supplying a null value.

[jacekkarczmarczyk]

You should do

<?php $value = whatever; ?>

<review :content="<?= json_encode($value) ?>"></review>

[yyx990803]

Note this is supposed to fail, because by definition, using v-bind means the content is treated as JavaScript expression, so it's the equivalent of writing the following in JavaScript:

createElement('review', { attrs: { content: }})

What we can do is giving a proper compilation warning instead of a runtime error. This can be a good first contribution.

[lyhper]

I'd like to have a try

[leevigraham]

Related: #3969

[stephan-v]

By the way what is being suggested here by @jacekkarczmarczyk will not work for numbers since they are being converted to strings this way.

<?php $value = whatever; ?>

<review :content="<?= json_encode($value) ?>"></review>

[jacekkarczmarczyk]

No, numbers will be numbers, if you have strings it means than you have strings instead of numbers

[yyx990803]

closed via #7940