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?
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
In VueJS2, the attribute properties with : don't need the {{ }}. In your case, the ternary is like that :
<multiple-photo-product product="isset($product) ? $product : ''"></multiple-photo-product>
Source : https://v2.vuejs.org/v2/guide/syntax.html#Attributes
Mustaches cannot be used inside HTML attributes, instead use a v-bind directive
