Javascript 移除DOM元素[带代码段]后，Vue将内嵌样式传输到下一个元素

我在vue上的

v-for

和

style

方面遇到问题，看看这个例子，我在

数据上存储了多个警报错误

，当用户单击关闭按钮时，

li

接收一些样式以将卡向左移动，然后我使用

.filter

删除该错误，但是，如果要删除的元素是最后一个，但不是一个或之前的元素，则样式将转移到下一个元素，使其也不显示

复制步骤： -运行代码段 -删除第二个警报

const-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
错误：[
"测试",，
“废话，废话”，
'嘿，这是一条错误消息，小心'
]
}
},
方法：{
解雇（索引）{
常量errorElement=此。$refs.errorElements[索引]
errorElement.style.height=errorElement.offsetHeight+'px'
errorElement.style.transition='left margin.2s ease-in，height.2s ease-in.2s，padding.2s ease-in.2s'
errorElement.style.marginLeft='-250px'
设置超时（（）=>{
errorElement.style.height=0
errorElement.style.padding=0
}, 200)
设置超时（（）=>{
this.errors=this.errors.filter（（error，i）=>{
返回i！=索引
})
}, 600)
//.2s左边距
//.2s对高度和衬垫的延迟
//.2s的高度和衬垫
}
} 
});
*{
保证金：0；
填充：0；
大纲：0；
文字装饰：无；
颜色：继承；
列表样式：无；
框大小：边框框；
}
html，body，#app{
高度：100vh；
背景色：#ccc；
字体系列：“Roboto”；
}
.警报包装器{
位置：固定；
底部：25px；
左：25px；
}
.警报包装器{
显示器：flex；
弯曲方向：立柱；
}
李先生{
边缘顶部：15px；
填充：15px 25px；
背景色：#e75147；
颜色：#Fff；
字体大小：12px；
线高：140%；
边界半径：5px；
位置：相对位置；
宽度：200px；
}
.李先生，请注意{
位置：绝对位置；
顶部：5px；
右：5px；
字体大小：12px；
颜色：#Fff；
过渡：.2s；
光标：指针；
不透明度：.8；
字体大小：粗体；
}
.警报。关闭：悬停{
不透明度：1；
}



x
{{error}}


首先，我建议您阅读一下Vue的内置转换。这样可以避免直接操作DOM

但是，这里的主要问题是
键
属性

当组件首次呈现时，它将创建3个
元素，键为
alert-0
、
alert-1
和
alert-2
。从技术上讲，它比这要复杂一些，因为涉及到vnode，但出于解释目的，我将只讨论键和DOM节点

移除索引为1的项目时，以下项目将沿着一个位置移动。所以以前在索引2中的项目现在在索引1中

当呈现此更新的数组时，它将创建2个
节点，一个具有
键
的
alert-0
，另一个具有
alert-1
。然后，Vue将新旧节点配对，并制作必要的补丁，以便从一个节点移动到另一个节点。这就是问题所在。您希望Vue删除旧的DOM节点
alert-1
，但就Vue而言，它仍然有一个名为
alert-1
的节点。从Vue的角度来看，
alert-2
已经消失

因此，Vue将删除节点
alert-2
，而不是
alert-1
。然后，它将更新
警报-1
的内容。
alert-1
的新内容将与
alert-2
的旧内容相同。这可能会使它看起来像是
样式
跳过了节点，但它没有，移动的是内容

解决方案是使用适当的
键
，该键与项目本身而不是其索引相关联。如果在您的情况下没有自然选择，那么您可以使用某种形式的随机数或递增计数器来在数据中生成合适的ID。
您可能应该使用Vue的内置动画支持来实现这一点，但除此之外，问题是您的
关键点
属性。Vue通过使用
键
在更新中识别等效的DOM节点，并且因为您使用的是
索引
，所以它将错误的节点配对。当您删除一个项目时，后续的索引值都会向下移动1，这会导致错误的节点配对并删除最后一个节点。您需要使用一个
键，当其他项目被删除时，该键不会改变。@噢，天哪，我根据一个随机数创建了这把键，它起作用了，请提供一个答案，这样我就不能将它标记为正确