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冲刺(团队)第六天
1.昨天的困难 可以获得教务处通知栏的15条文章数据了,但是在显示的时候出了问题. 私信聊天的交互还没研究清楚 2.今天解决的进度 成员 进度 陈家权 研究私信模块 赖晓连 研究问答模块 雷晶 研究服 ...
- CSS+JS笔记
CSS篇: 1.a标签去掉下划线 a { text-decoration:none; }
- AT89C51的内部4K flash,
AT89C51的内部4K flash, 是用来下载程序代码的,程序运行时只能做读取数据操作,不能写入.单片机断电时需要候保存数据,可以选择 带EEPROM的单片机 就可以,如STC 系列的单片机有内部 ...
- 使用node-webkit包装浏览器
node-webkit简称nwjs:开源地址 https://github.com/nwjs/nw.js 参考博客 https://www.cnblogs.com/soaringEveryday/p/ ...
- es6箭头函数的注意要点
具有一个参数的简单函数 var single = a => a single('hello, world') // 'hello, world' 没有参数的需要用在箭头前加上小括号 var lo ...
- jmeter body 中文显示为乱码解决
这种情况在jmeter3.0的版本中才会产生,注意:这不是乱码,而是由于3.0中优化body data后,使用默认的字体(Consolas)不支持汉字的显示.这样的情况可以这样调整:进入jmeter. ...
- Java并发编程中的设计模式解析(一)
Java并发编程,除了被用于各种Web应用.分布式系统和大数据系统,构成高并发系统的核心基础外,其本身也蕴含着大量的设计模式思想在里面.这一系列文章主要是结合Java源码,对并发编程中使用到的.实现的 ...
- IE userdata 原理 应用 详解
https://www.cnblogs.com/chyong168/archive/2012/04/24/2467505.html 在Internet Explorer 5中,Microsoft提供了 ...
- C# 抽签小程序
设计背景 设置一个Excel名单表,对名单进行随机抽取. 设计思路 使用Timer定时器,运行定时器进行名单随机滚动,停止定时器获得抽签结果 相关技术 随机数 Excel读取/导出 XML文档读写 相 ...
- Permutations II - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Permutations II - LeetCode 注意点 不确定有几种排列 解法 解法一:因为有重复的数字所以排列的个数不确定几个,一直生成新的排列直 ...