vue.set向对象里增加多层数组属性不生效问题及解决
作者:Vincent.TM 发布时间:2024-05-09 10:52:12
属性多层数组数据的添加修改
为什么需要使用Vue.set?
vue中不能检测到数组的一些变化
比如一下两种:
1、数组长度的变化 vm.arr.length = 100
2、数组通过索引值修改内容 vm.arr[1] = ‘aa’
那么为什么vue要做成这样,不去监听数组的变化,数组在日常中使用频率还是比较高的,这个问题其实尤大说过,是为了性能,假设我们新建了一个数组,长度是1000 但是只使用了前几个 ,去实现页面的响应式监听,从数组改变到页面输出一共需要遍历两遍数组,会增加性能消耗,这可能就是不去监听某一项数组数据变化的原因吧。
以下是vue observer的的源码,判断是数组了,会停止对数据属性的监测。
所以vue提供了Vue.set 方法弥补这些不足,Vue.set同vm.$set(target,key,value):可以动态的给数组、对象添加和修改数据,并更新视图中数据的显示。
vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定。
所以直接通过vm.arr[1] = ‘aa’的方法,无法修改值去触发vue中视图的更新,必须还得通过Object.defineProperty的方法去改变,而Vue.set()就封装了js底层的Object.defineProperty方法。
所以我们需要利用Vue.set() 响应式新增与修改数据。
最近项目中使用到了树形表格
即多层嵌套的数据,类似于这样的页面展示。
数据结构如下:
obj:[
{
id:'1',
type:'1',
children:[
{
id:'1-1',
type:'1-1',
}
]
}
]
在每一层数据的数据量都比较大的时候,不能使用一次性加载所有数据,需要优化加载,点击table的expand,即@expand-change方法获取下一层数据,那么就需要给下一层数据增加children属性
那么我们肯定会想到一下几种方法:
第一种:
this.$set(this.obj[index],‘children',[…res.items])
第二种:
this.obj[index].children = []
this.obj[index].children.splice(0,0,…res.items) //或者push方法
第三种:
使用foreach方法,循环res.items使用
this.$set(this.obj[index].children,index,res.items[index])
我使用了这几种方法,甚至是组合使用了,但是结果不是很好,数据是增加上了,但是并没有响应式的增加上,页面都没有展示出相应的数据,查看结构时,发现到第三层的时候,增加的children已经没有{ob:Observer},ob_: Observer是vue这个框架对数据设置的监控器,有这个属性,才能监听到数据的变化。
找了很久都不可以。最终尝试了以下方法才得以解决:
//给第三层增加数据
this.$set(this.obj[level1Index].children[level2Index],'children',[])
//使用foreach 将数组的每一项添加为响应式数据
res.items.forEach((item,index)=>{
this.obj[level1Index].children[level2Index]
this.$set(this.obj[level1Index].children[level2Index].children,index,item)
})
首先先添加children数组为响应式,再去将数组中的每一项也添加为响应式,页面变可以正常显示啦 。
向对象数组中添加新属性
this.rightMenuList.forEach(ele=>{
?? ??? ??? ??? ??? ?this.$set(ele, 'carInfo', data.carInfo)
?? ??? ??? ??? ?})
this.tableColums.forEach(res=>{
?? ??? ??? ??? ?this.$set(this.exportParams,res.id,"");
?? ??? ??? ?})
来源:https://blog.csdn.net/houyibing930920/article/details/104738509


猜你喜欢
- 1.指定GPU运算如果安装的是GPU版本,在运行的过程中TensorFlow能够自动检测。如果检测到GPU,TensorFlow会尽可能的利
- 句柄(handle)是C++程序设计中经常提及的一个术语。它并不是一种具体的、固定不变的数据类型或实体,而是代表了程序设计中的一个广义的概念
- 1:php地址 http://127.0.0.6/?c=json2:java 输出的结果是[{"i
- 一,进程的理论基础一个应用程序,归根结底是一堆代码,是静态的,而进程才是执行中的程序,在一个程序运行的时候会有多个进程并发执行。进程和线程的
- 实例如下:$("#stream_title").val().trim().replace(/\s/g,"&qu
- def get_area_list(self): &qu
- 有些 MySQL 数据表中可能存在重复的记录,有些情况我们允许重复数据的存在,但有时候我们也需要删除这些重复的数据。本章节我们将为大家介绍如
- scatter绘画散点图代码如下:import matplotlib.pyplot as pltplt.scatter(x,y,
- 字典的键 字典中的值没有任何限制, 可以是任意Python对象,即从
- 最近因为项目原因需要编写数据库设计文档,但是由于数据表太多,手动编写耗费的时间太久,所以搞了一个简单的脚本快速生成数据库结构,保存到word
- 本文实例讲述了Python3运算符常见用法。分享给大家供大家参考,具体如下:4.1算数运算符(以下假设变量a为10,变量b为21)实例操作:
- 用mysqldump和source可以使用这种方式导出数据:mysqldump -urott -P5678 --default-charac
- python数组和矩阵先创建一个一维数组直接定义一个数组:a = [1,2,3,4,5]b = ['a','c
- 决定数据类型的第一步是定义所存数数据的分类: 数值型, 字符串型还是临时型等;除了一些特别的并不是那么直观的外, 这通常是很直观的。接下来是
- 如下所示:def ref_txt_demo(): f = open('1.txt', 'r') data =
- 本文实例讲述了Python实现合并excel表格的方法。分享给大家供大家参考,具体如下:需求将一个文件夹中的excel表格合并成我们想要的形
- 通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中。但是,有时我们并不希望如此。一个很好的例子就是模态框&m
- 一:最近,经常碰到有网友问,如何使vbscript和javascipt传递变量。不知道为什么要这么做。因为每一种脚本语言几乎都可以完成所需要
- 在前几篇博文中,我们分别采用颜色识别,模板匹配,像素遍历等方法实现了棋子和棋盘的定位,具体内容可以参见我的前面的文章内容,在这一篇中,我们来
- #/bin/sh #检测mysql server是否正常提供服务 mysqladmin -u sky -ppwd -h localhost