尝试使用转义单引号解析 JSON 时，Javascript 中出现“意外标识符”错误

Question

在我的 Laravel 应用程序中，我将一个 JSON 对象传递给一个 Vue 组件：

<search v-bind:library="'{{ json_encode(language_library()) }}'"></search>

language_library() ，出于测试目的，只返回一行：

{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}

如您所见，字符串中的单引号被转义了。 但是，Vue 抛出此错误：

[Vue warn]: Error compiling template:

invalid expression: Unexpected identifier in

    '{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}'

  Raw expression: v-bind:library="'{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}'"

我不明白为什么会出现这个问题。 它是双引号内的单引号并且它也被转义了（在 PHP 后端使用addslashes() ）。 如果不是这样，我怎么能在我的 JSON 中有一个包含引号的字符串？

如果，而不是addslahes，我手动做这样的事情......

str_replace("'", "\'", $string)

...我仍然遇到同样的错误，在 JSON 中的引号前有两个反斜杠。

Answer 1

你只需要像下面的例子一样编写search标签：

<search v-bind:library="'{{ json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS) }}'"></search>

• JSON_HEX_APOS：所有 ' 都转换为 \' 。
• JSON_HEX_QUOT：所有 " 都转换为 "。

编辑

根据Laravel 的文档示例，您应该删除单引号。

<option {{ $isSelected($value) ? 'selected="selected"' : '' }} value="{{ $value }}">
    {{ $label }}
</option>

所以你的搜索标签会变成这样：

<search v-bind:library="{{ json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS) }}"></search>
// or you could declare a variable and assign `json_encode` to it
<?php $json = json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS); ?>
<search v-bind:library="{{ $json }}"></search>

Answer 2

这是常见的错误。 它与引用无关，双引号会导致此错误。 为什么？ 查看您对 prop 的输入

v-bind:library="'{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}'"

这意味着 js 不知道为什么 library prop 以v-bind:library="'{"结尾，所以使用引号而不是 dbl 引号。 像这样：

<search :library='@json(language_library())'></search>

Answer 3

尝试它可能会在我身上发生同样的事情

我用{!! $value !! }} {!! $value !! }}

<search v-bind:library="{!! json_encode(language_library()) !!}"></search>

Answer 4

答：你没有必要额外'

解释：记住json_encode将返回{}并且 Laravel 将在{{ }}回显它然后作为对象本身传递并编译到 javascript {}

编辑：

使用额外的'将被 javascript 视为结束字符串

编码示例

<search v-bind:library="{{ json_encode(language_library()) }}"></search>