今天遇到一个bug,列表删除元素时,明明在外层设置了key,但是列表元素的状态居然复用了,找了好久原因,最后是key的取值问题,记录一下。
首先key可以取undefine,这个是不会报错的
然后项目的代码结构是这样的
<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了,哈哈哈。