Choices JS结合Livewire wire:model.live后搜索选择器失效求助

问题根源 #

Livewire的wire:model.live会触发DOM重新渲染，原Choices实例绑定的<select>元素被替换，导致搜索功能失效；报错“Cannot access offset of type string on string”通常是因为Livewire绑定的属性初始类型错误（比如多选时初始值为字符串而非数组）。

具体修复步骤 #

1. 规范Livewire组件属性初始值
   如果是多选选择器，确保组件内绑定的属性初始化为数组：

   // Livewire组件类
   public $selectedOption = []; // 多选用数组
   // 单选的话初始化为null或合法选项值，避免空字符串
   public $selectedOption = null;
   

2. 封装Choices初始化函数
   把初始化逻辑封装成可复用函数，每次DOM更新后重新创建实例（先销毁旧实例避免冲突）：

   function initSearchableSelect() {
       // 销毁已存在的Choices实例
       if (window.searchSelectInstance) {
           window.searchSelectInstance.destroy();
       }
       // 重新初始化Choices
       window.searchSelectInstance = new Choices('#searchable-select', {
           searchEnabled: true,
           itemSelectText: '',
           // 其他你的自定义配置项
       });
   }
   

3. 绑定Livewire DOM更新事件
   监听Livewire的livewire:update事件（DOM更新完成后触发），重新初始化Choices：

   // 页面加载时先初始化一次
   document.addEventListener('DOMContentLoaded', initSearchableSelect);
   
   // Livewire更新DOM后重新初始化
   document.addEventListener('livewire:update', initSearchableSelect);
   

4. 给选择器添加固定标识
   确保<select>元素有固定ID，方便JS获取：

   <select id="searchable-select" wire:model.live="selectedOption">
       <!-- 选项内容 -->
       @foreach($options as $option)
           <option value="{{ $option->id }}">{{ $option->name }}</option>
       @endforeach
   </select>
   

额外优化（动态加载选项场景） #

如果选项是Livewire动态加载的，可在组件的updated或hydrate钩子中触发前端初始化：

// Livewire组件类
public function updatedOptions() {
    $this->dispatch('refresh-select');
}

前端监听自定义事件：

document.addEventListener('refresh-select', initSearchableSelect);

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