Laravel Livewire对象数组绑定复选框不更新问题求解

问题根源 #

你当前代码里手动添加的checked属性是导致状态不同步的核心原因：Livewire的wire:model会自动根据绑定值管理复选框的选中状态，硬编码的@if($d->selected) checked @endif会强制覆盖DOM状态，破坏双向绑定逻辑，导致组件数据和视图状态脱节。

如果你的$list是Eloquent模型对象数组，还需要确保selected属性在模型的$fillable列表中，否则Livewire无法修改该属性。

修复步骤 #

1. 移除手动checked属性
   删掉视图中硬编码的选中状态判断，让Livewire完全接管复选框状态：

   @foreach($list as $index => $d)
       <input type="checkbox" wire:model="list.{{ $index }}.selected">
       <label>{{ is_array($d) ? $d['name'] : $d->name }}</label>
   @endforeach
   

2. 确保数据结构可被Livewire修改

   • 如果$list是关联数组（即你给出的JSON格式），直接在组件中定义即可：

     // Livewire组件类中
     public $list = [
         ["name" => "A", "selected" => true],
         ["name" => "B", "selected" => true],
     ];
     

   • 如果$list是Eloquent模型对象数组，需要在对应模型中添加selected到可填充字段：

     // 模型类
     class YourModel extends Model
     {
         protected $fillable = ['name', 'selected'];
     }
     

原理说明 #

Livewire的嵌套数组/对象绑定依赖于组件属性的可访问性和自动DOM同步。移除手动checked属性后，Livewire会在用户点击复选框时，自动更新list.$index.selected的值，同时同步更新视图的选中状态，实现双向绑定的一致性。

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