AlpineJS从Eloquent对象渲染x-data遇语法错误，如何解决？

你的问题出在使用@json指令将集合传入Alpine的x-data时，生成的JSON字符串导致了语法解析错误。@json会输出带双引号的完整JSON字符串，直接嵌入到x-data的对象字面量中时，会让Alpine无法正确识别表达式结构，从而抛出语法错误。

解决步骤 #

方法1：使用Livewire的@js指令（推荐） #

Livewire提供的@js指令专门用于将PHP变量转换为合法的JavaScript表达式，它会直接输出原生JS对象，避免引号和转义问题：

<div class="p-2" x-data="{marketplaces: @js($marketplaces)}">
    <span x-text="JSON.stringify(marketplaces)"></span>
</div>

方法2：手动解析JSON字符串 #

如果无法使用@js，可以将@json输出的字符串用JSON.parse解析，同时处理转义问题：

<div class="p-2" x-data="{marketplaces: JSON.parse('{!! addslashes(json_encode($marketplaces)) !!}')}">
    <span x-text="JSON.stringify(marketplaces)"></span>
</div>

注意：直接用x-text="marketplaces"会显示[object Object]，使用JSON.stringify(marketplaces)才能看到集合的具体内容。

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