时间戳

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

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

问题描述

在我的 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."}'"

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

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

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

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

标签： javascriptphpjsonlaravelvue.js

解决方案

您只需编写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 文档的示例，您应该删除单引号。

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

推荐阅读