this.$nextTick()关于在vue中使用Echarts初始化获取Dom失败的原因分析
vue中在mounted周期内使用Echarts初始化获取Dom失败。vue是异步更新的,故当函数执行和数据传递存在时间差时,可以使用nextTick函数来延迟调用。
·
分析思路:
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函数来延迟调用。
更多推荐
已为社区贡献1条内容
所有评论(0)