1、问题描述

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

Ant-design-vue a-checkbox-group 追加数据后第一个无法选中-卖坚果的怪叔叔

2、代码

```
// 修改前
<a-col
:span="24"
v-for="(item, index) in state.selectOtions"
:key="index"></a-col>

// 修改前
<a-col
:span="24"
v-for="(item, index) in state.selectOtions"
:key="item.id"></a-col>

```

3、解决方案

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

4、原理

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



微信扫描下方的二维码阅读本文