el_dialog嵌套echart组件，打开el_dialog时报echarts.init Error: Initialize failed: invalid dom.

最新推荐文章于 2024-01-09 15:31:25 发布
原创 最新推荐文章于 2024-01-09 15:31:25 发布 · 4.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决了在使用Element UI的el_dialog组件时遇到的Echart图表初始化失败的问题。当el_dialog打开时，由于DOM元素尚未完全渲染，直接使用Echart初始化会报错。通过使用Vue的$nextTick方法，可以确保DOM更新后再进行图表初始化，从而避免错误。

是因为打开el_dialog时，dom元素还没有渲染完成，所以用document.getElementId("元素Id")获取不到元素，导致echart.init报Error: Initialize failed: invalid dom.

解决方法：

可以使用vm.$nextTick([callback]);

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。


harry034
关注
当Element UI里面el_dialog嵌套echart组件，打开el_dialog时报echarts.init Error: Initialize failed: invalid dom
迎接_成
01-22 2986
是因为打开el_dialog时，dom元素还没有渲染完成，所以用document.getElementId(“元素Id”)或者refs获取不到元素，导致echart.init报Error:Initializefailed:invaliddom.解决方法：1.可以使用‘vm.refs获取不到元素，导致echart.init报Error: Initialize failed: invalid dom....
Echarts报错： Error in v-on handler: “Error: Initialize failed: invalid dom.“
yolo_link的博客
07-01 3604
在使用Echarts遇到了这个问题。遍寻无果的情况下，我是怎么解决的？最开始使用，图表组件是正常的。可是怎么就出现这个问题了呢？ 同一个路由，我想展示不同图表组件构成的页面，所以采用了tab切换按钮控制单个页面的显示与隐藏。 注意！！！ 从我这个思路开始，就是我踩坑的第一步。 控制显隐想当然就采取了v-if。。。 万万忘了v-if可不是简单的控制元素显示和隐藏，它可是创建和销毁元素来达到所谓的显隐效果。 当然，上面都是我马后炮式的后知后觉，和报错交锋的时候依旧沉浸在代码逻辑层面。 之前有说过：像这种[Vue
Vue 中 nextTick 原理和应用场景
zRanStady的博客
03-14 8401
在 Vue 官方文档中，nextTick 是这么说明的： 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 原理 1.异步执行 Vue实现响应式并不是数据发生变化之后 DOM 就立即变化，而是按照一定策略进行 DOM 的更新。其实在Vue的文档中，不难发现Vue是异步执行 DOM 更新。 异步执行的机制简单来说就是： 1、首先所有的同步任何肯定是在主线程上执行的，即执行栈； 2、除了主线程，还一个任务队列task queue，只要异步任务有了运
$nextTick
2301_76436765的博客
04-28 130
$nextTick
vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.
jiangjunyuan168的博客
01-09 1632
在开发的过程中，项目中需要用到 echarts，引入后在渲染的过程中报错了：Initialize failed: invalid dom.这个，作者在以前也遇到过这种情况，在 vue2 中正常来说将 echarts 图表渲染操作放到 mounted 或者 $nextTick 函数中就可以了。但是在 vue3 的项目中作...
if (!dom) { throw new Error('Initialize failed: invalid dom.'); }的含义
最新发布
12-23
`throw new Error('Initialize failed: invalid dom.')`：如果条件成立（即`dom`不存在），则抛出一个错误，错误信息为"Initialize failed: invalid dom."（初始化失败：无效的DOM）。 这个错误通常发生在以下...
【ZeyFraのWeb开发经验03】关于在Element UI的el-dialog组件中使用echarts产生Cannot read property ‘getAttribute‘ of null
ZeyFraの博客
03-07 559
关于在Element UI的el-dialog组件中使用echarts的问题 问题描述： "Cannot read property 'getAttribute' of null" "ECharts Can't get dom width or height!" "Initialize failed: invalid dom" 原因： 当我们打开el-dialog时，dom元素是还没有渲染完成的 解决： // 使用setTimeout定时间器 open(){ this.dialogVisibl
Vue $nextTick 使用场景
zero_person_xianzi的博客
04-28 1676
前言 虽然 $ nextTick是一个中级知识点。但只要你是一个vue开发者，你就必须得知道$nextTick的使用场景。不管是面试还是日常工作，你都用得到。 $nextTick的定义 $nextTick会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.ne...
Vue.js中this.$nextTick()的使用
weixin_45932157的博客
04-21 357
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； 先来第一个例子看一看 <template> <section>
vue中$nextTick()作用
H-L的博客
05-30 844
vue更新数据是异步的1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了$nextTick(() =&gt; {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染什么是Vue.nextTick()官方文档解释如下：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值