Vue 嵌套数组 数组更新视图不更新
关于Vue的响应式原理,可以看官方文档或其他资料,
https://www.jianshu.com/p/34de360d6035
data里定义了一个数组arr,数组的元素可以是同样格式的数组arrChild(数组嵌套),如果只改变最外层的元素即arr的元素,视图可以更新,如果改变的是arrChild里边的数据(内层元素),视图不会自动更新。
比如有这样一个功能:根据id删除删除一条数据,需要循环遍历整个数组及子数组,
this.removeData(this.data, id) removeData (items, id) {
items.forEach((item, index) => {
if (item.id === id) {
items.splice(index, 1)
console.log('这相等了', item, items)
return items
}
if (item.children) {
item.children = (this.removeData(item.children, id))
// 使用splice方法去更新改变后的子数组,
items.splice(index, 1, item)
}
})
console.log(2, this.poi++, items)
return items
}
如果有子数组则递归调用removeData方法, 在修改子数组后,返回该子数组,使用splice方法更新该数组元素。
data :
data: [{
id: '1',
code: '0001',
name: '测试数据1',
status: '启用',
remark: '测试数据测试数据'
}, {
id: '2',
code: '0002',
name: '测试数据2',
status: '启用',
remark: '测试数据测试数据',
children: [{
id: '01',
code: '00001',
name: '测试数据01',
status: '启用',
remark: '测试数据测试数据'
}, {
id: '02',
code: '00002',
name: '测试数据02',
status: '启用',
remark: '测试数据测试数据',
children: [{
id: '001',
code: '000001',
name: '测试数据001',
status: '启用',
remark: '测试数据测试数据'
}, {
id: '002',
code: '000002',
name: '测试数据002',
status: '启用',
remark: '测试数据测试数据'
}]
}]
}, {
id: '3',
code: '0003',
name: '测试数据3',
status: '启用',
remark: '测试数据测试数据'
}, {
id: '4',
code: '0004',
name: '测试数据4',
status: '启用',
remark: '测试数据测试数据'
}]
PS:
拷贝对象或者数组时,可以使用扩展运算符 "...
"。如果对象或者数组中包含子对象和子数组,使用
JSON.parse(JSON.stringify(str))
。
const obj3 = {...obj}
const itemsCopy = [...items]
const itemsCopySub = JSON.parse(JSON.stringify(items))
Vue 嵌套数组 数组更新视图不更新的更多相关文章
- 解决vue中对象属性改变视图不更新的问题
在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...
- vue 数组push元素 视图没更新
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...
- vue2数组更新视图未更新的情况
以选中列表为例 <p @click="selectGoods(item, index)" :class="{'selected': item.isActive}&q ...
- vue中对象属性改变视图不更新问题
常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...
- avalon数据已更新,视图未更新的bug修复
$computed: { pinlei() { var key = this.currentProduct.key || 'youpin'; console.log(key, "我是key& ...
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
- vue数组操作不更新视图问题
vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
- vue中修改了数据但视图无法更新的情况
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
随机推荐
- 项目Beta冲刺(团队)随笔集
凡事预则立 项目Beta冲刺准备 第一天 项目Beta冲刺(团队)第一天 第二天 项目Beta冲刺(团队)第二天 第三天 项目Beta冲刺(团队)第三天 第四天 项目Beta冲刺(团队)第四天 第五天 ...
- b7
组员:陈锦谋 过去两天完成了哪些任务: 细节最后完善 明日计划: 无 还剩下哪些任务: 无 有哪些困难: 暂无 有哪些收获和疑问: 无
- 结对&团队之1715|K班取经
声明:同学请勿抄袭,追责莫要怪我: 因为暂时闲着没事,就翻阅学长学姐的博客找找灵感,个人觉得应该还有人和我一样对软工实践未来的一大段路还很天真,包括目前的结对作业和团队组队也很迷路,于是写下这篇博客提 ...
- Centos7 虚拟机复制后网卡问题 Job for network.service failed
在运行“/etc/init.d/network restart”命令时,出现错误“Job for network.service failed. See 'systemctl status netwo ...
- JAVA 对象序列化——Serializable
1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存object st ...
- C51中的关键字data,idata,xdata,pdata,bdata
写在最前面的话:官方网站的解答是最可信的.英语不错的必看.http://www.keil.com/support/man/docs/c51/c51_le_memtypes.htm 下面转载几篇中文的, ...
- [转帖]Kerberos简介
1. Kerberos简介 https://www.cnblogs.com/wukenaihe/p/3732141.html 1.1. 功能 一个安全认证协议 用tickets验证 避免本地保存密码 ...
- nowcoder 203J Graph Coloring I(dfs)
题目链接 题目描述 修修在黑板上画了一些无向连通图,他发现他可以将这些图的结点用两种颜色染色,满足相邻点不同色. 澜澜不服气,在黑板上画了一个三个点的完全图.修修跟澜澜说,这个图我能找到一个简单奇环. ...
- 01.基于IDEA+Spring+Maven搭建测试项目--综述
目前公司的测试工作中常见两种接口:HTTP和Dubbo,这两种接口类型均可以使用相关测试工具进行测试,但都会有一定的局限性和不便之处,具体如下: 1.HTTP接口,当需要对于参数进行加密解密时,就得对 ...
- The Best Path HDU - 5883(欧拉回路 && 欧拉路径)
The Best Path Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tot ...