脚本宝典收集整理的这篇文章主要介绍了记录vue不能检测数组和对象变动的方法。，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

测试数据：

  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官方文档链接描述, 看不懂就自己按照文档的去敲一下。

脚本宝典总结

以上是脚本宝典为你收集整理的记录vue不能检测数组和对象变动的方法。全部内容，希望文章能够帮你解决记录vue不能检测数组和对象变动的方法。所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。