vue.set向对象里增加多层数组属性不生效问题及解决

目录
  • 属性多层数组数据的添加修改
    • 为什么需要使用Vue.set？
    • 最近项目中使用到了树形表格
  • 向对象数组中添加新属性

属性多层数组数据的添加修改

为什么需要使用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,"");
            })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • Vue之Vue.set动态新增对象属性方法

    当我们给一个比如props中,或者data中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用Vue.set方法 Vue.set方法用来新增对象的属性.如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新 这里本来food对象是没有count属性的,我们要给其添加count属性就必须使用Vue.set方法,而不能写成'this.food.count = 1' 以上这篇Vue之Vue.set动态新增对象属性方法就是小编分享给大家的全部内容了,希望能给大

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • vue.set向对象里增加多层数组属性不生效问题及解决

    vue.set向对象里增加多层数组属性不生效问题及解决

    目录 属性多层数组数据的添加修改 为什么需要使用Vue.set? 最近项目中使用到了树形表格 向对象数组中添加新属性 属性多层数组数据的添加修改 为什么需要使用Vue.set? vue中不能检测到数组的一些变化 比如一下两种: 1.数组长度的变化 vm.arr.length = 100 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ 那么为什么vue要做成这样,不去监听数组的变化,数组在日常中使用频率还是比较高的,这个问题其实尤大说过,是为了性能,假设我们新建了一个数组,长度是10

  • php简单对象与数组的转换函数代码(php多层数组和对象的转换)

    复制代码 代码如下: function arrayToObject($e){ if( gettype($e)!='array' ) return; foreach($e as $k=>$v){ if( gettype($v)=='array' || getType($v)=='object' ) $e[$k]=(object)arrayToObject($v); } return (object)$e; } function objectToArray($e){ $e=(array)$e; fo

  • JavaScript删除对象的不必要的属性

    JavaScript删除对象的不必要的属性

    目录 示例 方式一:delete 删除 方式二:解构 总结 补充 总结 Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想. 业务开发中,我们经常会遇到:基于后端返回接口数据,前端保存到对象 Object 中,前端开发过程中为了一些场景的便利性,需要在该对象中增加相应的属性,但这些属性对于后端没有意义,保存提交时希望删除掉. 真实业务代码:保存前需要删除对应的 *Value 字段 async saveData (type, data) { // 提交时删除多余字段 delete

  • Vuex给state中的对象新添加属性遇到的问题及解决

    目录 Vuex给state中的对象新添加属性遇到的坑 向vuex对象中增加新的属性需要注意 总结 Vuex给state中的对象新添加属性遇到的坑 state.js中有一个空对象obj: export default {   ...   obj: {} } 在App.vue中点击“给空对象增加属性”按钮,触发事件addObjAttr: <template>   <div id="app">     ...     <button @click="a

  • vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)

    目录 深度优先遍历多层数组对象 比如树结构是这样的 vue遍历包含数组的对象 请求来拿到后数据格式是下面这种 最终在html中这样遍历 深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的话可以拿到爷爷Id,自己Id,父亲Id:其实如果想要拿到label的话就把data.id换成data.label就行了 function treeFindPath(tree, func, path = []) {         if (!tree) return []         for (cons

  • vue elementUI 表单校验功能之数组多层嵌套

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo

  • JavaScript数组对象实现增加一个返回随机元素的方法

    本文实例讲述了JavaScript数组对象实现增加一个返回随机元素的方法.分享给大家供大家参考.具体如下: 核心特性: 概率随机.顺序随机.随机冒泡 本方法 来自个人手写 JavaScript 的实践,只涉及 JavaScript 1.5(ECMAscript 3 国际标准)语言本身,在所有 JS 引擎实现中通用~ 为Array对象新增random方法: (function () { function Random_SN(iArray) { return Math.floor(Math.rand

  • php多层数组与对象的转换实例代码

    多层数组和对象转化的用途很简单,便于处理WebService中多层数组和对象的转化 简单的(array)和(object)只能处理单层的数据,对于多层的数组和对象转换则无能为力. 通过json_decode(json_encode($object)可以将对象一次性转换为数组,但是object中遇到非utf-8编码的非ascii字符则会出现问题,比如gbk的中文,何况json_encode和decode的性能也值得疑虑.下面上代码: 复制代码 代码如下: <?php function object

  • JavaScript 里的类数组对象

    很早以前我就知道可以把 arguments 转化为数组:[].slice.call(arguments),因为 arguments 是个类数组对象,所以才可以这么用.但是我一直不清楚什么叫做类数组对象( array-like objects) 今天看 Effective JavaScript 就有一节是专门讲这个的,感觉真是太拽了. 先看我写的一些示例代码: 复制代码 代码如下: a = "hello" [].map.call(a, (e) -> e.toUpperCase())

随机推荐