SyntaxError: Unexpected token } in Vue js

Question

我的代码是这样的：

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

代码运行时抛出错误：

SyntaxError: Unexpected token } in

但是如果代码是这样的：

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

它不会抛出错误。

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

如果不使用:，则数据以字符串形式发送。

我该如何解决？

Answer 1

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

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

Mustaches cannot be used inside HTML attributes, instead use a v-bind directive

Answer 2

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

尝试以下操作：

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

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

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

vue.js