SyntaxError：Vue js中的意外令牌}答案

【问题标题】：SyntaxError: Unexpected token } in Vue jsSyntaxError：Vue js中的意外令牌}
【发布时间】：2017-12-13 16:58:13
【问题描述】：

我的代码是这样的：

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

代码运行时会抛出错误：

SyntaxError: Unexpected token } in

但是如果代码是这样的：

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

它不会引发错误。

我添加:，这样数据就作为对象发送了。

如果不使用:，则数据作为字符串发送。

我该如何解决？

【问题讨论】：

【解决方案1】：

问题在于如果没有设置php变量$product（即等于null或""），那么Vue会尝试将prop :product与''绑定，最终导致错误（例如尝试进行:product="" 绑定）

尝试以下方法：

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

注意被单引号包围的双引号""。这将告诉 Vue 将 product 属性绑定到一个空字符串，以防 php 的 $product 变量未设置。

也请看看here。您可能会发现它很有帮助。要记住的关键点是v-bind 需要有效的 javascript 表达式，即插值（即 Blade 的花括号 {{}} 内的任何内容）也必须是有效的 javascript 表达式

【讨论】：

【解决方案2】：

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

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

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

【讨论】：