Laravel Livewire wire:change事件触发失败问题求助

当前自定义多选筛选器无法触发filter函数，核心原因有两个：

• 复选框未与Livewire的tag_id属性绑定，选中状态无法同步到组件
• wire:change被放置在非表单元素（.overSelect的div）上，该元素不会触发change事件

1. 调整Blade模板，绑定复选框到Livewire属性 #

由于是多选场景，tag_id需定义为数组类型（在Livewire组件中声明public $tag_id = [];），给每个复选框绑定wire:model并添加触发筛选的事件：

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select disabled>
        <option>{{ empty($tag_id) ? 'Select an option' : count($tag_id) . ' items selected' }}</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      @foreach($categories as $category)
      <label>
        <input type="checkbox" value="{{ $category->id }}" wire:model="tag_id" wire:change="filter" /> 
        {{ $category->name }}
      </label>
      @endforeach
    </div>
  </div>
</form>

• 将原空select改为disabled，用于显示选中状态提示（可选优化）
• 移除.overSelect上无效的wire:model和wire:change
• 给每个复选框添加wire:model="tag_id"，Livewire会自动维护选中的ID数组
• 添加wire:change="filter"，每次复选框状态变化时触发筛选函数

2. 优化Livewire组件逻辑 #

在Livewire组件类中，确保tag_id为数组类型，并实现筛选逻辑：

public $tag_id = [];

public function filter()
{
    // 示例筛选逻辑，根据实际业务调整
    $this->targetData = YourModel::when(!empty($this->tag_id), function($query) {
        $query->whereIn('category_id', $this->tag_id);
    })->get();
}

也可以使用Livewire的自动更新钩子替代wire:change，添加updatedTagId方法，每次tag_id变化时自动触发筛选：

public function updatedTagId()
{
    $this->filter();
}

若使用此方法，可移除复选框上的wire:change="filter"，更贴合Livewire的响应式特性。

3. 保留原有JS和CSS（无需修改） #

原showCheckboxes函数与CSS样式可继续使用，它们仅负责下拉面板的显示/隐藏，不影响Livewire的绑定逻辑。

• Livewire仅能监听标准表单元素（input、select、textarea等）的change事件，非表单元素（div、span）上的wire:change不会生效
• 多选复选框绑定数组时，Livewire会自动处理选中值的添加/移除，无需手动编写JS同步逻辑

内容的提问来源于stack exchange，提问作者Delano van londen