语法错误：Vue js中的意外标记}

Question

我的代码是这样的：

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

如果代码运行，则存在错误：

  

语法错误：

中的意外标记}

但如果代码如下：

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

没有错误

我添加:，以便以对象

的形式发送数据

如果它不使用:，则发送的数据是字符串

我该如何解决？

Answer 1

问题在于如果未设置php变量null（即等于""或:product），则Vue将尝试绑定prop {{1与''最终会导致错误（比如尝试制作:product=""绑定）

尝试以下方法：

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

请注意单引号括起来的双引号""。如果没有设置php的product变量，这将告诉Vue将$product道具与空字符串绑定。

请同时查看here。你会发现它很有用。回忆的关键点是v-bind期望有效的javascript表达式，即插值（即Blade的花括号{{}}内的任何内容）必须是有效的javascript表达式太

Answer 2

在VueJS2中，:的属性属性不需要{{ }}。在你的情况下，三元组是这样的：

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

来源：https://vuejs.org/v2/guide/syntax.html#Attributes

  

不能在HTML属性中使用Mustaches，而是使用v-bind指令