Vue组件接收JSON属性报错，如何处理PHP JSON转义问题？

这个问题我之前也踩过坑，核心原因是直接用json_encode输出的JSON里包含了会破坏Vue属性表达式的特殊字符（比如未转义的引号、换行符），导致Vue无法正确解析这个绑定表达式。下面给你几个靠谱的解决方案：

1. 优先使用Laravel的@json指令（最简便） #

Laravel专门提供了@json Blade指令来处理这种场景，它内部已经帮你处理了所有必要的转义，确保输出的JSON能被Vue正确识别。只需要把你的代码改成：

<gallery-modal-edit :gallery='@json($gallery)'></gallery-modal-edit>

@json本质上是调用json_encode时自动添加了JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP这些参数，把HTML特殊字符和引号都转成了安全的实体，完全避免了语法冲突的问题。

2. 手动给json_encode添加转义参数 #

如果你不想用@json，可以手动给json_encode传参数来转义关键字符，比如转义双引号和单引号：

<gallery-modal-edit :gallery='{!! json_encode($gallery, JSON_HEX_QUOT | JSON_HEX_APOS) !!}'></gallery-modal-edit>

JSON_HEX_QUOT会把双引号转成\u0022，JSON_HEX_APOS把单引号转成\u0027，这样就不会和你属性里的单引号冲突，Vue也能正确解析这个JSON字符串。

3. 全局变量传递（备选方案） #

如果你的数据特别复杂，或者有其他特殊需求，也可以把JSON数据挂载到全局window对象，然后在Vue组件里引用：

<!-- 在Blade模板里添加全局变量 -->
<script>
window.galleryData = @json($gallery);
</script>

<!-- Vue组件里接收 -->
<gallery-modal-edit :gallery="window.galleryData"></gallery-modal-edit>

不过这种方法不如直接传属性优雅，适合一些特殊场景。

为什么原来的代码会出错？ #

默认的json_encode输出的JSON使用双引号，而你的Vue属性用单引号包裹。如果$gallery里的字符串包含单引号（比如"description": "John's awesome gallery"），或者有换行符、HTML标签等，就会直接破坏Vue的表达式结构，导致控制台抛出"invalid expression"错误。而上面的方法都是通过转义这些特殊字符，让Vue能正确识别整个JSON作为一个合法的表达式值。

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