[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

错误场景一:

错误提示:

在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化,

代码如下:


// 基于准备好的dom,初始化echarts实例

var bar_dv = document.getElementById('bar_dv');let myChart = this.$echarts.init(bar_dv)


解决办法:

首先考虑画图要用到的图形区域id是否正确存在,如果确认无误可再尝试如下方法:

1、利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象,代码如下:


 


到此为止该问题就算解决了,如果觉得还可以点个赞哦! 

 

 

错误场景二:

        当我想在el-dialog对话框中展示Echarts图表时,出现了如下错误:

 

 

问题定位:

      经过反复的调试后发现,通过$refs获取不到 el-dialog对话框中的子组件对象,返回的都是undefined,这也就导致了上图的错误。

 

 

 

解决办法:

      在通过this.$refs  获取el-dialog对话框中的子组件对象之前加入以下函数即可:

 this.$nextTick(function () {           });

 

全部代码如下:

 

 

效果图:

 
————————————————
版权声明:本文为CSDN博主「Moment ° 回忆 ✨」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_35366269/article/details/82112595

你可能感兴趣的:(vue,echarts)