使用Vuejs

Question

我有一个非常简单的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>

我的Vue：

new Vue({
  el: '#multistep-form',
  data: {
    items: [
      {id: 0, text: 'Item 1'}
      {id: 1, text: 'Item 2'}
      {id: 2, text: 'Item 3'}
    ],
    checkedItems: [],
  }
});

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

任何人都知道为什么会发生这种情况以及如何解决这个问题？

提前致谢！

Answer 1

您将数组指定为v-model，它应该是数组的索引之一。请尝试以下方法：

<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>