为什么“checked”属性和 v-model 不能在 Vue 中一起使用？

Question

我想知道如果在 Vue 中的这些元素中使用 v-model，为什么一系列输入复选框元素中的“已选中”属性变得无法访问。

最近我尝试将 CheckAll 功能添加到项目列表中。 没有 v-model 这很简单：

<input type="checkbox" v-model="checkAll">
<div class="list">
  <input v-for="item in items" :value="item.id" type="checkbox" :checked="checkAll">
</div>

但如果我将 v-model "toRemove" 添加到每个项目以获取选中项目的数组，checkAll 复选框将停止工作：

<input type="checkbox" v-model="checkAll">
<div class="list">
  <input v-for="item in items" :value="item.id" type="checkbox" :checked="checkAll" v-model="toRemove">
</div>

有趣的是，“禁用”属性以类似的方式与 V-model 一起工作：

<input type="checkbox" v-model="checkAll">
<div class="list">
  <input v-for="item in items" :value="item.id" type="checkbox" :disabled="checkAll" v-model="toRemove">
</div>

我想知道为什么 Vue 不允许同时通过 v-model 进行 checkAll 和一组检查项。

Answer 1

在复选框上使用v-model 设置checked 属性。您不能同时将checked 设置为两个不同的值。

请参阅 https://vuejs.org/v2/guide/forms.html 以了解有关 v-model 如何与复选框一起使用的更多说明。

在您的情况下，您只需通过使用所有相关项目 ID 填充数组 toRemove 来实现检查所有功能。

即使您没有使用v-model，使用:checked="checkAll" 来实现检查所有功能也不是正确的方法。您的模板中有一个基本假设，即所有复选框都已选中或未选中，而不是独立的复选框。这似乎在一个简单的测试用例中有效，但最终一旦您尝试让复选框真正发挥作用，它就永远不可能结合在一起。