vue2 ajax异步请求,数据嵌套层数过多,导致页面无法正常通过数据驱动渲染

数据层数过多的小坑

  初入门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({......})
为了将原先的this,也就是vue的对象保存起来,原理可以参考https://segmentfault.com/q/1010000007376594?_ea=1326047
然后就是这个that.$set,网上资料有这么个说法,当数据不是data的第一层,而是包了几层之后,=赋值是不会触发页面渲染的,要用$set(obj,key,val),查阅了官方文档,得出了最后的解决方法,也就是上面的代码。

结论:数据层数不宜深,情到深处快换人(换方法)= =
posted @ 2017-09-06 17:50  Mistakelzb  阅读(3960)  评论(0编辑  收藏  举报