今天发现用索引做下标的时候,删除第二个元素会出现bug,顿时觉得很神奇,因为我代码里都是这样写的,从来没出现过bug。
出现的原因:
如果是index做下标的话之前的索引是[1,2,3];
删除2后按道理讲应该变成[1,3];
但是实际上变成的是[1,2,undefined];
虚拟DOM diff的时候就会认为2没有变化,把3删除了。
那么为什么我正常开发的项目中没有出现这个问题呢??
因为正常情况下前端删除不是自己本地玩泥巴,而是通过ajax请求后端接口删除,再获取新的数据重新赋值,不是因为没有bug,而是bug被隐藏起来了。还有就是如果展示item.text也是没有问题的。
<template>
<div>
<div v-for="(item, index) in list" :key="index">
<input placeholder="" value="vue" />
<button @click="() => doDelete(index)">
delete
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
id: 1,
text: "react",
},
{
id: 2,
text: "vue",
},
{
id: 3,
text: "dom",
},
],
};
},
methods: {
doDelete(index) {
this.list.splice(index, 1);
},
},
};
</script>