SyntaxError: Unexpected token } in Vue js
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