vue key的bug

SuperHaker~2024-03-22 9:26

今天遇到一个bug，列表删除元素时，明明在外层设置了key，但是列表元素的状态居然复用了，找了好久原因，最后是key的取值问题，记录一下。

首先key可以取undefine，这个是不会报错的

然后项目的代码结构是这样的

js 复制代码

<component
    v-for="(item, index) in showList"
    :is="getComponent(item.type)"
    :key="item[index]"
    :data="item"
 >
 </component>

问题就在于，数据源的item中是有index这个属性的，并且作为id是唯一的，但是取的时候，是通过item[index]取的，index不是变量嘛，so

所有的key都是undefined了，哈哈哈。