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

1、问题描述

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

2、代码

>

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

3、解决方案

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

4、原理

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