关于Vue的响应式原理,可以看官方文档或其他资料,

https://www.jianshu.com/p/34de360d6035

data里定义了一个数组arr,数组的元素可以是同样格式的数组arrChild(数组嵌套),如果只改变最外层的元素即arr的元素,视图可以更新,如果改变的是arrChild里边的数据(内层元素),视图不会自动更新。

比如有这样一个功能:根据id删除删除一条数据,需要循环遍历整个数组及子数组,

  1. this.removeData(this.data, id)
  2.  
  3. removeData (items, id) {
  4. items.forEach((item, index) => {
  5. if (item.id === id) {
  6. items.splice(index, 1)
  7. console.log('这相等了', item, items)
  8. return items
  9. }
  10. if (item.children) {
  11. item.children = (this.removeData(item.children, id))
  12. // 使用splice方法去更新改变后的子数组,
  13. items.splice(index, 1, item)
  14. }
  15. })
  16. console.log(2, this.poi++, items)
  17. return items
  18. }

如果有子数组则递归调用removeData方法, 在修改子数组后,返回该子数组,使用splice方法更新该数组元素。

data :

  1. data: [{
  2. id: '1',
  3. code: '0001',
  4. name: '测试数据1',
  5. status: '启用',
  6. remark: '测试数据测试数据'
  7. }, {
  8. id: '2',
  9. code: '0002',
  10. name: '测试数据2',
  11. status: '启用',
  12. remark: '测试数据测试数据',
  13. children: [{
  14. id: '01',
  15. code: '00001',
  16. name: '测试数据01',
  17. status: '启用',
  18. remark: '测试数据测试数据'
  19. }, {
  20. id: '02',
  21. code: '00002',
  22. name: '测试数据02',
  23. status: '启用',
  24. remark: '测试数据测试数据',
  25. children: [{
  26. id: '001',
  27. code: '000001',
  28. name: '测试数据001',
  29. status: '启用',
  30. remark: '测试数据测试数据'
  31. }, {
  32. id: '002',
  33. code: '000002',
  34. name: '测试数据002',
  35. status: '启用',
  36. remark: '测试数据测试数据'
  37. }]
  38. }]
  39. }, {
  40. id: '3',
  41. code: '0003',
  42. name: '测试数据3',
  43. status: '启用',
  44. remark: '测试数据测试数据'
  45. }, {
  46. id: '4',
  47. code: '0004',
  48. name: '测试数据4',
  49. status: '启用',
  50. remark: '测试数据测试数据'
  51. }]

PS:

拷贝对象或者数组时,可以使用扩展运算符 "..."。如果对象或者数组中包含子对象和子数组,使用JSON.parse(JSON.stringify(str))

  1. const obj3 = {...obj}
  2. const itemsCopy = [...items]
  3. const itemsCopySub = JSON.parse(JSON.stringify(items))

  

Vue 嵌套数组 数组更新视图不更新的更多相关文章

  1. 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...

  2. vue 数组push元素 视图没更新

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...

  3. vue2数组更新视图未更新的情况

    以选中列表为例 <p @click="selectGoods(item, index)" :class="{'selected': item.isActive}&q ...

  4. vue中对象属性改变视图不更新问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...

  5. avalon数据已更新,视图未更新的bug修复

    $computed: { pinlei() { var key = this.currentProduct.key || 'youpin'; console.log(key, "我是key& ...

  6. Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  7. vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

  8. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  9. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

随机推荐

  1. 项目Beta冲刺(团队)第六天

    1.昨天的困难 可以获得教务处通知栏的15条文章数据了,但是在显示的时候出了问题. 私信聊天的交互还没研究清楚 2.今天解决的进度 成员 进度 陈家权 研究私信模块 赖晓连 研究问答模块 雷晶 研究服 ...

  2. CSS+JS笔记

    CSS篇: 1.a标签去掉下划线 a { text-decoration:none; }

  3. AT89C51的内部4K flash,

    AT89C51的内部4K flash, 是用来下载程序代码的,程序运行时只能做读取数据操作,不能写入.单片机断电时需要候保存数据,可以选择 带EEPROM的单片机 就可以,如STC 系列的单片机有内部 ...

  4. 使用node-webkit包装浏览器

    node-webkit简称nwjs:开源地址 https://github.com/nwjs/nw.js 参考博客 https://www.cnblogs.com/soaringEveryday/p/ ...

  5. es6箭头函数的注意要点

    具有一个参数的简单函数 var single = a => a single('hello, world') // 'hello, world' 没有参数的需要用在箭头前加上小括号 var lo ...

  6. jmeter body 中文显示为乱码解决

    这种情况在jmeter3.0的版本中才会产生,注意:这不是乱码,而是由于3.0中优化body data后,使用默认的字体(Consolas)不支持汉字的显示.这样的情况可以这样调整:进入jmeter. ...

  7. Java并发编程中的设计模式解析(一)

    Java并发编程,除了被用于各种Web应用.分布式系统和大数据系统,构成高并发系统的核心基础外,其本身也蕴含着大量的设计模式思想在里面.这一系列文章主要是结合Java源码,对并发编程中使用到的.实现的 ...

  8. IE userdata 原理 应用 详解

    https://www.cnblogs.com/chyong168/archive/2012/04/24/2467505.html 在Internet Explorer 5中,Microsoft提供了 ...

  9. C# 抽签小程序

    设计背景 设置一个Excel名单表,对名单进行随机抽取. 设计思路 使用Timer定时器,运行定时器进行名单随机滚动,停止定时器获得抽签结果 相关技术 随机数 Excel读取/导出 XML文档读写 相 ...

  10. Permutations II - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Permutations II - LeetCode 注意点 不确定有几种排列 解法 解法一:因为有重复的数字所以排列的个数不确定几个,一直生成新的排列直 ...