Vue项目中,使用v-for循环出来的数组,组件删除位置错误。

做项目时,遇到需要增加或者减少相同组件时,用v-for循环出来。一般情况下,都习惯性的把index(序号)赋值给key,来作区别。

这样的结果就是无论怎么删,都是只删除了最后一个子组件。

主要原因还是出在虚拟DOM上,应该给key一个子组件独一无二的值来作为唯一标识。

解决办法:

给数组遍历一次,加个唯一的属性,把这个属性的值赋给key即可。

注:这个问题目前我只发现在v-for嵌套组件时才发生。

原文地址:https://www.cnblogs.com/zyl96/p/11759874.html