使用Choices.js与Livewire实现多选并绑定数组的问题

直接上可落地的解决方案，核心是监听Choices.js的选中/移除事件，手动同步选中的ID数组到Livewire的filters.categories：

1. Blade模板部分 #

用wire:ignore包裹原生多选select（可以隐藏，Choices会生成自己的UI），确保Livewire不会重置这个DOM元素：

<div wire:ignore>
    <select id="category-select" name="filters.categories[]" multiple hidden>
        @foreach($categories as $category)
            <option value="{{ $category->id }}" {{ in_array($category->id, $filters['categories'] ?? []) ? 'selected' : '' }}>
                {{ $category->name }}
            </option>
        @endforeach
    </select>
</div>

2. Choices.js初始化与事件监听 #

在组件模板底部（或通过@push('scripts')加载）写JS逻辑，监听Choices的选中、移除、清空事件，把选中的ID数组传给Livewire：

document.addEventListener('livewire:initialized', function() {
    const selectEl = document.getElementById('category-select');
    const choices = new Choices(selectEl, {
        removeItemButton: true, // 显示移除按钮，方便操作
        placeholderText: '选择分类',
        searchEnabled: true // 开启搜索，提升体验
    });

    // 选中选项时同步数据
    selectEl.addEventListener('addItem', () => {
        const selectedIds = choices.getValue(true).map(item => item.value);
        Livewire.dispatch('updateCategories', { categories: selectedIds });
    });

    // 移除选项时同步数据
    selectEl.addEventListener('removeItem', () => {
        const selectedIds = choices.getValue(true).map(item => item.value);
        Livewire.dispatch('updateCategories', { categories: selectedIds });
    });

    // 清空所有选项时同步空数组
    selectEl.addEventListener('clear', () => {
        Livewire.dispatch('updateCategories', { categories: [] });
    });

    // Livewire更新分类时，同步Choices的选中状态（防止组件重新渲染后选中丢失）
    Livewire.on('categoriesUpdated', (data) => {
        choices.setChoiceByValue(data.categories);
    });
});

3. Livewire组件类逻辑 #

在组件类里监听前端传来的事件，更新filters.categories并触发过滤：

class NewsFilter extends Component
{
    public $filters = [
        'categories' => []
    ];

    protected $listeners = ['updateCategories'];

    // 接收前端传来的分类ID数组
    public function updateCategories($data)
    {
        $this->filters['categories'] = $data['categories'];
        // 触发文章过滤逻辑
        $this->filterArticles();
    }

    // 示例：文章过滤方法
    private function filterArticles()
    {
        $this->articles = \App\Models\Article::when(
            !empty($this->filters['categories']),
            fn($query) => $query->whereIn('category_id', $this->filters['categories'])
        )->get();
    }

    public function render()
    {
        return view('livewire.news-filter', [
            'categories' => \App\Models\Category::all(),
            'articles' => $this->articles ?? \App\Models\Article::all()
        ]);
    }
}

关键注意点 #

• 一定要加wire:ignore，否则Livewire重新渲染组件时会销毁Choices实例，导致功能失效
• 用choices.getValue(true)获取所有选中项，返回的是包含value的对象数组，需要提取value组成ID数组
• 通过Livewire事件传递数据，避免直接操作DOM修改Livewire属性，防止响应式冲突
• 如果初始化时filters.categories已有选中值，Blade里的option要设置selected，同时通过categoriesUpdated事件同步到Choices中

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