ElementUI动态生成el-checkbox后，取消一项后下

场景：一个数组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>