Laravel10+Livewire3集成Select2报错：()=>表达式非赋值或调用

问题说明 #

在Laravel 10环境中集成Livewire 3与Select2组件时，resources/views/layouts/app.blade.php中的脚本触发上述语法错误，同时Select2组件在Livewire更新后无法正常维持状态。

错误原因 #

1. Livewire 3 事件监听语法变更：Livewire 3不再支持window.livewire.on()的写法，需使用Livewire.on()来监听组件事件，旧写法会引发语法兼容问题。
2. Select2 未与Livewire绑定：页面中的Select2组件缺少wire:model指令，无法将选中值同步到Livewire组件的$tags属性，也无法响应组件更新。
3. 重复初始化逻辑冗余：hydrate方法会在每次组件更新时触发事件，重复初始化Select2不仅浪费性能，还可能引发DOM操作冲突。
4. 代码格式不规范：箭头函数内的代码缩进混乱，虽不直接报错，但增加了调试难度。

解决步骤 #

1. 修正Livewire事件监听语法 #

修改resources/views/layouts/app.blade.php中的脚本，使用Livewire 3标准事件监听方式，并封装Select2初始化逻辑：

<script>
    $(document).ready(function() {
        // 初始化Select2
        initSelect2();

        // Livewire 3 事件监听
        Livewire.on('refresh-select2', () => {
            initSelect2();
        });
    });

    // 封装初始化逻辑，避免重复代码
    function initSelect2() {
        $('.select2-multiple').select2({
            placeholder: "选择标签",
            allowClear: true
        });
    }
</script>

2. 为Select2添加Livewire双向绑定 #

修改resources/views/livewire/create-article.blade.php中的select标签，添加wire:model.live="tags"实现实时同步，同时补全textarea的绑定：

<div class="mb-3 mt-3">
    <label for="description">描述:</label>
    <textarea class="form-control" rows="5" id="comment" name="description" wire:model.live="description"></textarea>
    @error('description'){{$message}} @enderror
</div>
<div class="form-group mb-3">
    <label for="select2Multiple">标签</label>
    <select class="select2-multiple form-control" name="tags[]" multiple="multiple"
            id="select2Multiple" wire:model.live="tags">
        <option value="tag1">tag1</option>
        <option value="tag2">tag2</option>
        <option value="tag3">tag3</option>
    </select>
    @error('tags'){{$message}} @enderror
</div>

3. 优化Livewire组件的事件触发逻辑 #

删除CreateArticle.php中的hydrate方法，改为在组件挂载时触发初始化事件，并补充标签的验证规则：

<?php

namespace App\Livewire;

use Livewire\Component;

class CreateArticle extends Component
{
    public $title;
    public $description;
    public $tags = [];
    
    protected $rules = [
        'title' => 'required',
        'description' => 'required',
        'tags' => 'array|min:1', // 新增标签验证规则
    ];
    
    public function articleFormValidation()
    {
        $validated = $this->validate();
        // 此处添加业务逻辑，比如保存文章
        dd($validated); // 测试是否获取到所有表单值
    }
    
    public function mount()
    {
        // 组件挂载完成后触发Select2初始化
        $this->dispatch('refresh-select2');
    }
    
    public function render()
    {
        return view('livewire.create-article');
    }
}

4. 确认依赖加载顺序 #

确保jQuery在Select2之前加载，当前代码已满足此要求，避免重复加载同一依赖。

额外提示 #

• Livewire 3组件更新时会重新渲染DOM，因此必须在组件更新后重新初始化Select2，否则组件会失效。
• 使用wire:model后，Select2的选中值会自动同步到Livewire组件属性，无需手动处理表单提交参数。
• 若需避免全局脚本冲突，可将Select2初始化逻辑放在Livewire组件内部，使用@script指令包裹。

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