Echarts报错: Error in v-on handler: “Error: Initialize failed: invalid dom.“
在使用Echarts遇到了这个问题。遍寻无果的情况下,我是怎么解决的?最开始使用,图表组件是正常的。可是怎么就出现这个问题了呢?同一个路由,我想展示不同图表组件构成的页面,所以采用了tab切换按钮控制单个页面的显示与隐藏。注意!!!从我这个思路开始,就是我踩坑的第一步。控制显隐想当然就采取了v-if。。。万万忘了v-if可不是简单的控制元素显示和隐藏,它可是创建和销毁元素来达到所谓的显隐效果。当然
在使用Echarts遇到了这个问题。遍寻无果的情况下,我是怎么解决的?
问题描述
最开始使用,图表组件是正常的。可是怎么就出现这个问题了呢?
同一个路由,我想展示不同图表组件构成的页面,所以采用了tab切换按钮控制单个页面的显示与隐藏。
注意!!!
从我这个思路开始,就是我踩坑的第一步。
控制显隐想当然就采取了v-if。。。
万万忘了v-if可不是简单的控制元素显示和隐藏,它可是创建和销毁元素来达到所谓的显隐效果。
当然,上面都是我马后炮式的后知后觉,和报错交锋的时候依旧沉浸在代码逻辑层面。
之前有说过:像这种[Vue warn]报错不影响程序运行,就是看着头疼。
这次不一样了,tab切换后,原来图表位置空空如也
可见,这次的爆红是势必要解决的🤺🤺🤺
问题梳理
跟着报错位置找到对应的代码:
行呗,我就获取一下元素咋就爆红呢!!!
我dom无效,也就是没找到。
页面有但是没找到,就说明我们在渲染前就执行这个方法。
问题解决
欸,有了!记得nextTick()方法吗?
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
通俗理解:在任何地方你想获取dom,只要它没被创建,用nextTick就能进行dom操作了,无需等待哦。
自从用了nextTick,我是腿也不疼了(图表重见天日),眼也不花了(爆红完美消失)
谢赏脸(❁´◡`❁)
这里是飞鱼爱吃米,只授渔,不授鱼!
更多推荐
所有评论(0)