Echarts报错: Error in v-on handler: “Error: Initialize failed: invalid dom.“

  • Post author:
  • Post category:其他


在使用Echarts遇到了这个问题。遍寻无果的情况下,我是怎么解决的?



问题描述

最开始使用,图表组件是正常的。可是怎么就出现这个问题了呢?

同一个路由,我想展示不同图表组件构成的页面,所以采用了tab切换按钮控制单个页面的显示与隐藏。

注意!!!

从我这个思路开始,就是我踩坑的第一步。

控制显隐想当然就采取了v-if。。。

万万忘了v-if可不是简单的控制元素显示和隐藏,它可是创建和销毁元素来达到所谓的显隐效果。

当然,上面都是我马后炮式的后知后觉,和报错交锋的时候依旧沉浸在代码逻辑层面。

之前有说过:像这种[Vue warn]报错不影响程序运行,就是看着头疼。

这次不一样了,tab切换后,原来图表位置空空如也

请添加图片描述

可见,这次的爆红是势必要解决的🤺🤺🤺



问题梳理

在这里插入图片描述

跟着报错位置找到对应的代码:

在这里插入图片描述

行呗,我就获取一下元素咋就爆红呢!!!

我dom无效,也就是没找到。

页面有但是没找到,就说明我们在渲染前就执行这个方法。



问题解决

欸,有了!记得nextTick()方法吗?

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

通俗理解:在任何地方你想获取dom,只要它没被创建,用nextTick就能进行dom操作了,无需等待哦。

在这里插入图片描述

自从用了nextTick,我是腿也不疼了(图表重见天日),眼也不花了(爆红完美消失)

请添加图片描述

谢赏脸(❁´◡`❁)


这里是飞鱼爱吃米,只授渔,不授鱼!



版权声明:本文为yolo_link原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。