AlpineJS内联x-data使用Laravel @json传递PHP变量的问题

最优解决方案：使用JSON_HEX_QUOT参数修饰@json输出 #

你遇到的冲突本质是@json默认输出的字符串中包含的双引号会和x-data外层包裹的双引号提前闭合，只需要给@json添加JSON_HEX_QUOT参数即可完美解决，该方案兼容所有PHP变量类型（字符串、布尔值、数组、对象等），无需修改现有内联写法。

示例代码：

@php
$test = "Hello World's testing";
// 支持任意类型变量，比如数组
// $test = ['name' => '测试', 'status' => true];
@endphp

<div x-data="{
    message: @json($test, JSON_HEX_QUOT)
}">
    <span x-text="message"></span>
</div>

JSON_HEX_QUOT是PHP原生json_encode的内置常量，作用是将JSON输出中的所有双引号转换为十六进制转义序列\u0022，不会触发HTML属性外层双引号的闭合逻辑，AlpineJS在解析时会自动将转义序列还原为正常的双引号，完全不影响变量的实际取值。

你当前使用的反引号方案存在潜在风险：如果PHP变量输出的JSON内容中包含反引号或者${字符，会被识别为ES6模板字符串的闭合标记或插值语法，导致JS语法错误，稳定性远不如JSON_HEX_QUOT`方案。

备选方案：外层用单引号包裹x-data，配合JSON_HEX_APOS参数 #

如果你的场景更适合用单引号包裹x-data属性，只需要把参数换成JSON_HEX_APOS即可转义所有单引号，避免冲突：

<div x-data='{
    message: @json($test, JSON_HEX_APOS)
}'>

内容的提问来源于stack exchange，提问作者Basil Gass