记录vue不能检测数组和对象变动的方法。

尾调极光
• 阅读 1632

测试数据:

  items: [
    {name: '业务状态', id: 'taskState', data: [{name:'全部', id: 0},{name:'进行中', id: 1},{name:'已完成', id: 2},{name:'已归档', id: 3},{name:'已终止', id: 4}]},
    {name: '业务状态', id: 'taskState', data: [{name:'全部', id: 0},{name:'进行中', id: 1},{name:'已完成', id: 2},{name:'已归档', id: 3},{name:'已终止', id: 4}]},
    {name: '业务状态', id: 'taskState', data: [{name:'全部', id: 0},{name:'进行中', id: 1},{name:'已完成', id: 2},{name:'已归档', id: 3},{name:'已终止', id: 4}]},
    {name: '业务状态', id: 'taskState', data: [{name:'全部', id: 0},{name:'进行中', id: 1},{name:'已完成', id: 2},{name:'已归档', id: 3},{name:'已终止', id: 4}]},
  ]

难点:

  1. items是个数组,里面嵌套着许多层对象。当然数据是不一样的,我这里只是举例说明。
  2. 这里面存在着二个难点,第一,直接改变items数量,vue是检测不到的。第二,增加items[i]里的对象属性。vue也是检测不到。
  3. 当然按照vue官方文档的解释,检测不到的主要问题是JavaScript导致的。(尤雨溪大佬你说的算)

代码:

// 解决办法    
this.$set(this.items, 0, Object.assign({}, this.items[0], { active: 0, defaultActive: 0 }))

// 实际应用
this.items.forEach((r, row) => { // 变量数组,给每个对象附上默认值
    this.$set(this.items, row, Object.assign({}, this.items[row], {
      thisActive: r.thisActive ? r.thisActive : 0,
      defaultActive: r.defaultActive ? r.defaultActive : 0,
      data: r.data ? r.data : [],
      pageIndex: r.pageIndex ? r.pageIndex : 1,
      pageSize: r.pageSize ? r.pageSize : 20,
      options: r.options ? r.options : {scrollbar: true, pullUpLoad: true},
      ref: r.ref ? r.ref : 'scroll' + row
    }))
})

这里解释一下,下列代码,是解决对象不能检测的问题,这里是一次性添加多个属性的方法。

let test = Object.assign({}, this.items[0], { active: 0, defaultActive: 0 })

下列代码,是解决数组检测不到的问题。(对象也可以用这个方法)
index--索引 'age'|| 13 分别代表对象里的 键||值

this.$set(this.items, index, test)) // 数组方法
this.$set(this.items[index], 'age', 13)) // 对象方法

以上解决方法代码,来自vue官方文档链接描述, 看不懂就自己按照文档的去敲一下。

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Stella981 Stella981
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Stella981 Stella981
3年前
List的Select 和Select().tolist()
List<PersondelpnewList<Person{newPerson{Id1,Name"小明1",Age11,Sign0},newPerson{Id2,Name"小明2",Age12,
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Easter79 Easter79
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MYSQL查询用户下多个角色信息
<resultMapid"baseBeanUser"type"com...vo.system.TUserVoOut"<idcolumn"id"property"id"/<resultcolumn"name"property"name"/
Wesley13 Wesley13
3年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na