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"设置成唯一的值
原理:待补

原文地址:https://www.cnblogs.com/victory820/p/9068209.html

时间: 2024-11-08 05:16:31

vue中数组删除,页面没重新渲染的相关文章

JSON相关知识,转载:删除JSON中数组删除操作

一:JSON是什么 JSONg格式:对象是一个无序的“名称/值”对的集合. 对象以括号开始,括号结束. 名称冒号分隔值. "名称/值"之间用逗号分隔 例: var people = {     "programmers": [{         "firstName": "Brett",         "lastName": "McLaughlin",         "em

当Vue中img的src是动态渲染时不显示问题

最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如图: 2.第一次写: 如图: 3.结果(汗...)并没有显示默认图片来代替: 审查元素发现没显示默认的图片,图片没有被打包.... 如图: 4.解决方案: 1.使用require引入图片 2.使用img的onerror属性 原文地址:https://www.cnblogs.com/xiaoqi201

关于vue数组中对象属性变更页面没重新渲染的问题

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数, 具体用法: arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值 this.footerList.$set(i, { siteId : monitorSiteData[j].siteId,

vue中数组更新视图不响应问题

数组更新注意事项 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 举个例子: var vm = ne

vue中iview框架下select选择器渲染的时候报警告Invalid prop: type check failed for prop &quot;value&quot;. Expected String, Number, got Undefined.

问题起因: 在一个选择器里 出了问题! <Form-item label="节点"> <Select v-model="formItem.select" placeholder="请选择节点" filterable> <Option @on-change="selectValue" v-for="item in mySelect" :value="item.hid&q

vue中数组检测重复性的两个方法

检查数组重复(一)let inputValue = this.positionGroupInput[groupId].inputValue;if (inputValue) {for (let positionGroup of this.lists) {if (positionGroup.id === groupId) {// 检查重复性let isExist = false;for (let position of positionGroup.positions) {if (position.n

在vue中数组对象转换为tree

直接上代码: <template> <div> <ul> <li v-for="list in datas(dataList)" :key="list.id"> <!-- {{list}} --> <span>{{list.name}}</span> <ul> <li v-for="(item,index) in  list.children" 

PDF中的空白页面怎么删除,PDF页面删除技巧

在Word中想要删除其中一页文档的怎么办?直接打开就可以删除了,那么我们如何删除PDF其中几页呢?下面小编就来告诉大家PDF删除页面跟空白页面的方法.想要删除PDF文档中的页面,可以使用PDF编辑器,编辑器就是可以编辑PDF文件,里面有很多的编辑工具,水印工具,页眉页脚工具,贝茨编号工具,背景工具等等,下面是具体的操作方法. 操作软件:PDF编辑器http://bianji.xjpdf.com/ 1.打开运行迅捷PDF编辑器,在编辑器中打开需要编辑的PDF文件 2.PDF文件打开之后,找到菜单栏

七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularjs中的ng-repeat不用 ,它对页面只进行一次渲染.后续如果需要更改数据且显示在页面上就需要想想其他办法啦~~~ 经过多次踩坑发现如下解决办法: 1.将vue引入当前页面,如下图所示: 2.使用Vue.set方法来对数据进行更改及渲染,如下图所示: