场景：一个数组List用来循环el-checkbox，List可能递增也可能递减。
问题描述：默认勾选了4项，当点击第一个CheckBox，复选框取消勾选，并且List数组减少一项，故当前复选框dom移除，点击下一项已勾选的CheckBox，发现点击无效，在点击一次才可以触发取消勾选。
错误代码如下：
<template>
<el-checkbox-group v-model="ids">
<ul class="select-item-ul">
<li v-for="(item.index) in hasCheckedData"
:key="index"
class="option">
<el-checkbox
:label="item[propsValue]">
{{item[propsLabel]}}
</el-checkbox>
</li>
</ul>
</el-checkbox-group>
</template>
<script>
export default{
data: () => ({
propsValue: 'id',
propsLabel: 'name',
ids: [1, 2, 3],
list: [{ id: 1, name: '选项1' }, { id: 2, name: '选项2' }, { id: 3, name: '选项3' }]
}),
computed: {
hasCheckedData () {
return this.list.filter(item => this.ids.includes(item[this.propsValue]))
}
}
}
</script>
问题解决：由于比较懒的在v-for中设置key值的时候 设置index索引，才导致这个问题，解决方法就是不能用index索引来设key值，而是用唯一的id值。
<li v-for="item in hasCheckedData"
:key="item[propsValue]"
class="option">
<el-checkbox
:label="item[propsValue]">
{{item[propsLabel]}}
</el-checkbox>
</li>
