Livewire组件无法绑定选中的checkbox值，提交后得到空数组如何解决

解决方案 #

你遇到的是Livewire下checkbox数组绑定失效的常见问题，按以下步骤逐一排查修复：

1. 给wire:model添加.array修饰符 #

Livewire绑定数组类型的公共属性时，必须显式加.array修饰符才能正确同步多选值，这是最核心的问题。

2. 给循环渲染的checkbox添加唯一wire:key #

Livewire循环输出元素时必须指定唯一标识，否则前端状态同步会出现异常。

3. 排查属性重置问题 #

确认组件的mount、render等生命周期钩子中没有每次请求都重置$selectedRows为空数组的逻辑。

修复后完整代码 #

Blade部分

<button wire:click.prevent="export">
   Export selected
</button>
<div>
@foreach($hotels as $hotel)
   <input type="checkbox" wire:model.array="selectedRows" value="{{ $hotel->id }}" wire:key="hotel-{{ $hotel->id }}">
   <label>{{ $hotel->name }}</label>
@endforeach
</div>

组件部分

如果使用的是Livewire 3，公共属性默认支持前端绑定，原有逻辑可直接保留：

public $selectedRows = [];

public function export() {
   dd($this->selectedRows);
}

额外排查点 #

如果修改后仍然为空，检查：

• 你使用的Livewire版本如果低于2.x，需要升级到稳定版
• 确认$hotels数据集在组件触发export动作时没有被意外清空，导致checkbox状态被重置
• 浏览器控制台没有Livewire相关的JS报错，如有报错先清理缓存重新加载页面

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