Vue.js循环中复选框功能异常的解决方案咨询

问题现象 #

使用v-for渲染物料列表时，点击复选框会同时选中一批物料，排查发现是因为多个物料的Quantity参数值相同，需要实现点击复选框仅选中单个物料，并将其Quantity值加入checkedMaterials数组。

解决方案 #

1. 给v-for添加唯一标识key #

Vue列表渲染需要唯一key跟踪节点身份，避免DOM复用导致的异常行为，直接用物料的唯一id作为key即可。

2. 放弃v-model绑定对象，改用@change事件手动处理 #

绑定整个物料对象时，若不同物料属性值完全一致，易导致Vue判断逻辑出错。改为绑定物料id，通过change事件手动控制checkedMaterials数组的添加与移除。

修改后的完整代码 #

模板部分

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Material name</th>
      <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="material in materials" :key="material.id">
      <td>
        <input 
          type="checkbox" 
          :value="material.id" 
          @change="handleMaterialCheck($event, material)"
        >
        {{ material.id }}
      </td>
      <td>{{ material.name }}</td>
      <td>{{ material.Quantity }}</td>
    </tr>
  </tbody>
</table>

脚本部分

export default {
  name: "Show",
  data() {
    return {
      materials: [],
      checkedMaterials: [],
      part: {}
    }
  },
  mounted() {
    this.getPart()
    this.getMaterials()
  },
  methods: {
    getPart() {
      axios.get(`/api/part/${this.$route.params.id}`).then(res => {
        this.part = res.data.data
      })
    },
    getMaterials() {
      axios.get('/api/material').then(res => {
        this.materials = res.data.data;
      })
    },
    handleMaterialCheck(event, material) {
      const quantity = material.Quantity;
      if (event.target.checked) {
        if (!this.checkedMaterials.includes(quantity)) {
          this.checkedMaterials.push(quantity);
        }
      } else {
        const index = this.checkedMaterials.indexOf(quantity);
        if (index !== -1) {
          this.checkedMaterials.splice(index, 1);
        }
      }
    }
  },
}

额外修复说明 #

• 修正了原代码中标签闭合错误（多余的</td>）
• 将materials初始值从空字符串改为空数组，符合数据类型规范
• 补充part变量初始化，避免未定义报错

内容的提问来源于stack exchange，提问作者Павел Жуков