Vue.js - 如何将复选框绑定到 v-for 中的数组答案

【问题标题】：Vue.js - How do you bind a checkbox to an array in a v-forVue.js - 如何将复选框绑定到 v-for 中的数组
【发布时间】：2021-02-08 23:52:02
【问题描述】：

我正在尝试查看是否可以将一组数据从一个组件传递到另一个组件，以基本上通过数据库批量更新选定的行，我知道道具是只读的。我面临的问题是，当我想使用复选框从父组件中选择数据时，它似乎无法识别所选行的 ID/值，在这种情况下，当控制台记录数组时，它们都返回为[ "row.id" ]，因此，表格上的所有复选框都被选中。下面的代码示例：

<tr v-for="row in data" :key="row.id" class="data">
 <td>
  <input type="checkbox" id="row.id" v-model="selectedRows" value="row.id">
 </td>
...
</tr>

我尝试使用row[key] 代替row.id，但似乎没有任何改变，是否有允许此过程工作的Vue 函数？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您没有将row.id 绑定到input。这就是为什么它取值为row.id。

这样做：

<input type="checkbox" :id="row.id" v-model="selectedRows" :value="row.id">

如果您想查看另一种执行相同操作的方法，可以查看此link。

【讨论】：