Vuejs2 使用Vuejs存储选中的值

我有一些非常简单的Vue.js多步骤代码。我试图暂时存储这些值，直到用户到达表单的末尾

但是，我在复选框值绑定中遇到了一些错误

我的表单如下所示：

<div v-for="item in items">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" v-model="checkedItems" :value="item.id">
    {{ item.text }}
  </label>
</div>

<div v-for="(item, index) in items">
  <label class="form-check-label">
      <input type="checkbox" class="form-check-input" v-model="checkedItems[index]" :value="item.id">{{ item.text }}
  </label>
</div>

当我单击这些项目时，它正在创建空复选框。当我取消选中附加图像中的项目时，这些项目将被删除

---

有人知道为什么会发生这种情况，以及我如何修复它吗？

您将数组指定为v型，它应该是数组的索引之一。请尝试以下操作：

<div v-for="item in items">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" v-model="checkedItems" :value="item.id">
    {{ item.text }}
  </label>
</div>

<div v-for="(item, index) in items">
  <label class="form-check-label">
      <input type="checkbox" class="form-check-input" v-model="checkedItems[index]" :value="item.id">{{ item.text }}
  </label>
</div>

{{item.text}

谢谢，这就成功了！虽然我不明白为什么它会创建空复选框。