vue中数组删除，页面没重新渲染
Posted daV_chen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中数组删除，页面没重新渲染相关的知识，希望对你有一定的参考价值。
创建一个组件时，数据类型是数组，在删除这个数组中的数据时，数组中的数据是对的，但页面渲染的数据却不对。
举例：（不一定复现）
<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"设置成唯一的值
原理：待补
以上是关于vue中数组删除，页面没重新渲染的主要内容，如果未能解决你的问题，请参考以下文章