Laravel Inertia Vue中按钮复选框批量选中异常修复方案

开发者阿泽

2026-6-22

问题原因分析

按钮数据缺失ID字段：后端控制器获取按钮数据时，仅查询了buttonTitle字段，未包含id，导致Vue模板中v-for的:key="button.id"值全部为undefined。Vue会因重复的key复用组件实例，引发点击单个复选框时所有按钮被选中的问题。
复选框未绑定到表单字段：当前复选框绑定的是独立的selectedButtons变量，提交表单时该变量的值未同步到form.buttons，会导致选中的按钮无法提交到后端。

修复步骤

1. 修复后端按钮数据查询

修改控制器的telegramCMS方法，确保获取按钮数据时包含id字段：

// 原代码
$buttons = TelegramUpload::all(['buttonTitle']);

// 修改后
$buttons = TelegramUpload::all(['id', 'buttonTitle']);

2. 修复Vue复选框绑定

将按钮复选框的v-model直接绑定到表单的form.buttons字段，删除独立的selectedButtons变量：

模板部分修改：

<!-- 原代码 -->
<input class="form-check-input me-2" type="checkbox" :value="button.id" v-model="selectedButtons">

<!-- 修改后 -->
<input class="form-check-input me-2" type="checkbox" :value="button.id" v-model="form.buttons">

脚本部分修改：

删除以下冗余代码：

const selectedButtons = ref([]);

验证修复效果

重新加载页面，按钮的id字段已正确获取，v-for的key不再重复。
点击单个复选框时，仅对应按钮会被选中。
提交表单时，选中的按钮ID会以数组形式提交到后端，符合验证规则。

额外优化建议

按钮区域的label标签for属性值错误，当前为Body，建议改为buttons以提升可访问性：
```
<label for="buttons" class="form-label">Buttons</label>
```
图片选择部分的复选框未绑定v-model，若需要提交选中的图片ID，需添加绑定到form.images：
```
<input class="form-check-input" type="checkbox" :value="upload.id" v-model="form.images">
```