Laravel向Vue组件传递PHP多维数组时渲染异常如何解决？

问题原因 #

该问题是HTML属性边界与JSON内引号冲突，叠加Blade默认HTML转义逻辑导致的标签解析错误：

1. @json 指令默认会对输出内容做HTML安全转义，JSON中的双引号会被转义为"实体
2. 转义后的JSON被放在:items属性的双引号内部时，"会被浏览器解析为实际的双引号，直接提前闭合了:items的属性边界，导致后续JSON内容被当成普通HTML属性解析，最终整个组件标签结构破裂，无法被Vue识别。
   你将@json直接输出到普通div中表现正常，是因为普通文本区域的"会被正常渲染为双引号，不会破坏标签结构。

修复方案 #

方案1：使用Laravel官方Js::from()方法（最稳妥，推荐） #

Laravel 8及以上版本提供了Illuminate\Support\Facades\Js门面，专门用于在Vue属性绑定中传递PHP数据，会自动处理所有转义逻辑：

<Test :items="{{ Js::from(Config::get('variables')) }}"></Test>

方案2：调整@json的使用方式 #

如果使用@json指令，不需要额外给属性值加双引号，直接写为：

<Test :items=@json(Config::get('variables'))></Test>

方案3：修改属性边界为单引号 #

将外层属性的包裹符号改为单引号，避免和JSON内部的双引号冲突：

<Test :items='@json(Config::get("variables"))'></Test>

附加优化（可选） #

你当前Vue组件的items属性定义不符合Vue规范，数组/对象类型的props默认值需要通过工厂函数返回，修正后避免控制台警告：

export default {
    name: "Test",
    props: {
        items: {
            type: Array,
            default: () => []
        }
    }
}

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