Ant-design-vue a-checkbox-group 追加数据后第一个无法选中

1、问题描述

ant-design-vue a-checkbox-group 追加数据后原本第一个无法选中。数据也不会打印出来。

2、代码

javascript <a-checkbox-group v-model:value="state.formData.address" style="width: 100%"> <a-row> <a-col :span="24" v-for="(item, index) in state.selectOtions" :key="index"> <a-checkbox class="address-item" :value="item.id"> <div class="item"> <p> <span class="name"> {{ item.consignee }}</span> <span class="phone">{{ item.phone }}</span> <span v-if="item.isDefault" class="default-tag"> 默认 </span> </p> <p>{{ state.addressItem(item) }}</p> </div> </a-checkbox> </a-col> </a-row> </a-checkbox-group>

3、解决方案

因为遍历设置的key 取的是index，将其改成唯一id即可。

4、原理

在使用 v-for 指令时，Vue 会使用 key 值来跟踪每个元素，并决定何时对其进行更新。如果两个元素具有相同的 key 值，则它们将被视为相同的元素。因此，如果多个元素拥有相同的索引作为其 key 值，那么 Vue 将无法区分它们，并且可能会导致出现奇怪的渲染结果。