创建一个组件时,数据类型是数组,在删除这个数组中的数据时,数组中的数据是对的,但页面渲染的数据却不对。
举例:(不一定复现)
<ul>
<li v-for="(item, index) in peoples" :key="index">{{item.name}}
<span @click="del(index)">删除</span>
</li>
</ul>
<script>
export default {
data() {
return {
peoples: [
{
name: ‘tom‘,
id: ‘1‘
},
{
name: ‘kitty‘,
id: ‘2‘
},
{
name: ‘jack‘,
id: ‘3‘
}
]
}
},
methods: {
del (index) {
this.peoples.splice(index, 1)
}
}
}
</script>
原因:设置v-for时:key用的是index。key的值不是唯一造成的。
解决::key="item.id"设置成唯一的值
原理:待补
原文地址:https://www.cnblogs.com/victory820/p/9068209.html
时间: 2024-11-08 05:16:31