今天,我在Vue中引入第三方库vant去渲染令一个第三方库echarts的图表数据时,出现了以下的bug:
Cannot read properties of null (reading 'getAttribute')
以上bug的大概意思就是想要获取的标签属性没有获取到。原因是我将echarts想要获取的标签属性放到了vant库的标签里面,然后在生命周期mounted里面去调用的写好的echart函数。但是因为第三方库的加载是异步的,只有当我们使用的时候才会去加载,所有就导致vant库的标签还没有在页面上渲染出来就在mounted钩子里面进行了调用,产生了如此bug。
解决的方法也很简单,只需要在mounted中调用nextTick函数就可以了
mounted() {
this.$nextTick(() => {
this.getChinaMap('nowMain', nowArr); //在methods中写好的echarts函数
})
}