分析思路:

1.getElementById() 通过id获取dom,id名称正确

2.div内给dom设置来足够的width和height,故不存在dom获取不到宽高的原因

3.console.log (chartDom)成功

4在mounted周期内引入来initcharts这个方法

5.但在getElementById()之前打印数据为undefined,所以页面其实没有获取到dom

6.我猜测dom是通过异步获取到的,而mounted钩子函数只执行一次。在执行时,数据还没有传过来,所以加载dom失败。

解决方法:

this.$nextTick方法相当于延时函数,是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数。

mounted() {
    let url = "./data/json/echarts_4.json";
    this.$Api.getData_get(url).then((res) => {
      if (res.data.length == 0) return;
      this.$nextTick(() => {// dom元素更新后执行,因此这里能正确打印更改之后的值  
        this.pt1data = res.data[0];
        this.pt2data = res.data[1];
        this.pt6data = res.data[2];
        this.initcharts_pt1();
        this.initcharts_pt2();
        this.initcharts_pt3();
        this.initcharts_pt4();
        this.initcharts_pt5();
        this.initcharts_pt6();
    });
});
},

GET:

vue是异步更新的,故当函数执行和数据传递存在时间差时,可以使用nextTick函数来延迟调用。

Logo

前往低代码交流专区

更多推荐