SyntaxError: Unexpected token } in Vue js

Question

My code is like this :

<multiple-photo-product :product="{{ isset($product) ? $product : '' }}"></multiple-photo-product>

When the code runs it throws an error:

SyntaxError: Unexpected token } in

But if the code is like this:

 <multiple-photo-product product="{{ isset($product) ? $product : '' }}"></multiple-photo-product>

It doesn't throw an error.

I add :, so that the data is sent as an object.

If it does not use :, the data is sent as a string.

How can I solve it?

Answer 1

The problem lies in the fact that if the php variable $product is not set (i.e equals to null or ""), then Vue will try to bind the prop :product with '' which ultimately results to an error (like trying to make a :product="" bind)

Try the following:

<multiple-photo-product :product="{{ isset($product) ? $product : '""' }}"></multiple-photo-product>

Notice the double quotes "" surrounded by the single quotes. This will say to Vue to bind the product prop with an empty string, in case php's $product variable is not set.

Please also have a look here. You may find it helpful. The key point to recall is that v-bind expects valid javascript expressions, that is the interpolated value (i.e. whatever is inside the Blade's curly braces {{}}) must be a valid javascript expression too