javascript - 尝试使用转义的单引号解析JSON时Javascript中的“Unexpected identifier”错误

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中包含一个包含引号的字符串？
如果不是我手动执行类似的操作，而不是添加...

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:全部'都转换为\ u0027。

JSON_HEX_QUOT:所有“”均转换为\ u0022。

编辑
根据 Laravel's Documentation的示例，应删除单引号。

<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>