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

1、问题描述

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

2、代码

<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 将无法区分它们，并且可能会导致出现奇怪的渲染结果。