Vue3中如何绑定复选框到数组内对象属性并响应状态变化

• 语法笔误：v-for中定义的索引变量为index，但后续绑定key、id时错误使用了不存在的itemIndex变量
• 核心逻辑错误：将getItems()直接写在v-for的循环源中，每次组件触发重渲染时都会重新执行该方法，生成全新的数组，之前对item.selected的修改会被直接重置，自然不会触发视图更新
• 用法错误：选项式API中不需要手动调用reactive定义响应式数据，data函数返回的属性本身就是响应式的；同时原data函数的return语法错误，漏了包裹对象的花括号
• 设计问题：不需要把生成数组的逻辑放到每次渲染都执行的方法里，应该把items数组作为独立的响应式状态存储，只有点击生成按钮时才更新

MyComponent.vue #

<template>
  <div>
    <div v-for="(item, index) in items" :key="`item-${index}`">
      <div class="form-check">
        <input class="form-check-input" :id="`checkbox-${index}`" v-model="item.selected" />
        <label class="form-check-label" :for="`checkbox-${index}`">{{ item.name }} (selected: {{ item.selected }})</label>
      </div>
    </div>

    <button class="btn" @click="generateItems">Generate Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemCount: 0,
      // 把items作为响应式状态存储
      items: []
    }
  },
  methods: {
    generateItems() {
      this.itemCount = Math.floor(Math.random() * 25) + 1;
      // 生成新数组直接赋值给响应式的items属性
      this.items = [];
      for (let i=0; i<this.itemCount; i++) {
        this.items.push({
          id: (i+1),
          selected: false,
          name: `Item #${i+1}`
        });
      }
    }
  }
}
</script>

Vue3中不管是选项式还是组合式API，只要数组本身是响应式的，直接用v-model="数组项.属性名"的写法就可以正确绑定复选框状态，框架会自动追踪深层对象属性的变更，不需要额外处理。

内容的提问来源于stack exchange，提问作者Dev