初入门vue2，在开发项目过程中因为用到了vue-echarts-v3，涉及图表的数据，难免数据就有过多的层数，导致出现了这么一个坑，其实归根结底是自己没有按照vue2官方的方法进行对象数据修改。
首先，数据结构大致是这样的：
echartData {
data1 {
name:'line',
series: [{
name:'',
}
lineData: {
title:'',
captionOption: {
isShow:true,
countBoxs: [{
name:'',
value:'',
date:''}]
},
},
legend: {
data: ['xxx','xxx']
}
}
}
之前也有接触过类似的数据驱动修改视图渲染的写法，都是类似这回项目里一样写的，通过data.attr = xxx这种格式去进行修改，console.log输出时发现数据确实已经得到了修改。
但是为什么，就是不渲染？！
后来查阅了官方的说明，以及他人踩坑的经过，终于得到答案，最终写法如下：
that.$set(that.echartData,'data1',{
name:'line',
series: [{
name:'xxx',
data: bandwidthData.rows.map(item=>item.text)
},{
name:'xxx',
data: bandwidthData.cp_rows.map(item=>item.text)
}],
xAxis: {
data: bandwidthData.rows.map(item=>item.time)
},
lineData: {
title:'',
captionOption: {
isShow:true,
countBoxs: [{
name:'',
value: bandwidthData.peakValue,
date: bandwidthData.peakTime
}, {
name:'',
value: bandwidthData.totalFlow,
}, {
name:'',
value:'',
}]
},
},
legend: {
data: ['xxx','xxx']
}
});
请求是通过axios封装的ajax请求发出的，这个与造成本坑的原因无关，我们可以暂且不论。
代码中的that，是通过var that = this;在ajax请求发出前声明的：
var that = this;
that.$ajax({......})
然后就是这个that.$set，网上资料有这么个说法，当数据不是data的第一层，而是包了几层之后，=赋值是不会触发页面渲染的，要用$set(obj,key,val)，查阅了官方文档，得出了最后的解决方法，也就是上面的代码。
结论：数据层数不宜深，情到深处快换人(换方法)= =
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
