共计 1437 个字符，预计需要花费 4 分钟才能阅读完成。
测试数据：
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}]},
]
难点：
items 是个数组，里面嵌套着许多层对象。当然数据是不一样的，我这里只是举例说明。
这里面存在着二个难点，第一，直接改变 items 数量，vue 是检测不到的。第二，增加 items[i] 里的对象属性。vue 也是检测不到。
当然按照 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 官方文档链接描述, 看不懂就自己按照文档的去敲一下。