Laravel Livewire向JS传递数组出现语法错误如何解决？

错误原因 #

直接手动拼接PHP数组到JS代码中，或自行处理对象键的引号格式，容易出现语法转译不彻底的问题，导致JS解析时抛出Unexpected token ':'错误。Livewire提供了专门的指令来安全完成PHP到JS的数据转译，无需手动处理格式。

正确实现步骤 #

1. Livewire组件中定义数据 #

在你的Livewire组件类里，定义选项数组和选中值变量：

class YourComponent extends Component
{
    // 多选选项列表
    public $selectOptions = [
        ['label' => '选项A', 'value' => 'a'],
        ['label' => '选项B', 'value' => 'b'],
        ['label' => '选项C', 'value' => 'c'],
    ];

    // 存储选中的值
    public $selectedItems = [];

    public function render()
    {
        return view('livewire.your-component');
    }
}

2. Blade视图中安全传递数组到JS #

使用Livewire的@js指令，自动将PHP数组转译为合法的JS格式，结合@script包裹脚本：

<div>
    <select id="multi-virtual-select"></select>

    @script
        document.addEventListener('livewire:initialized', () => {
            VirtualSelect.init({
                ele: '#multi-virtual-select',
                multiple: true,
                // 用@js转译PHP数组为JS数组
                options: @js($this->selectOptions),
                selectedValue: @js($this->selectedItems),
                onChange: (selectedValues) => {
                    // 同步选中值到Livewire组件
                    @this.set('selectedItems', selectedValues);
                }
            });
        });
    @endscript
</div>

关键注意事项 #

• 必须使用@js指令：它会自动处理数组/对象的转译、引号转义，彻底避免手动拼接导致的语法错误，无需再给对象键手动加引号。
• 监听livewire:initialized事件：确保DOM和Livewire实例完全初始化后，再初始化VirtualSelect，避免找不到DOM元素的问题。
• 确认VirtualSelect的JS资源已正确引入（可通过CDN或本地文件引入）。

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