Dom元素加载，el-dialog中嵌套el-tab，获取不到dom元素，Echart图表获取不到Dom元素问题

已于 2023-07-24 15:18:10 修改
阅读量648 收藏
点赞数 1
文章标签： vue.js javascript 前端 echarts
于 2023-07-24 14:29:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/evennight/article/details/131895430
版权

报错内容：Error in mounted hook: “Error: Initialize failed: invalid dom.“
echart图需要初始化挂在在dom中，如果没有dialog弹出层的话，可以直接写在mounted中通过this.$refs.name获取或者document.getElement的各种方法获取，但是一旦和dialog挂钩，那么如果常规写在mounted的时候，就会报错，取不到对应元素，
因此需要在加载完成弹出层后在取dom的值
两种实现方式
方式一： :visible.sync=“dialogVisible”
在js中写dialogVisible = true后获取对应dom元素
方式二：标签绑定方法@opened = "opendDialog”然后在方法中获取对应的的dom元素
这两种原理都是一样的都是在弹出层加载完成后在获取值

ps：如果遇到弹出层中又嵌套了tab页签的情况，谨慎使用tab也得懒加载事件 例如这样，在tab也执行懒加载的时候也是只加载当前选中tab的dom元素，我就是掉进了这个坑，导致以为上面两种方式无效，仔细检查会发现删掉lazy问题就能迎刃而解

evennight
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
1. **使用`$nextTick`**：与上述解决方案类似，在`$nextTick`回调中调用`resetFields()`，确保`el-form`已经被正确地编译到DOM中。 ```javascript resetForm(formName) { this.$nextTick(() => { this.$refs[form...
在el-dialog中无法正确获取DOM的问题
m0_73216899的博客
04-06 461
Dialog 的内容是懒渲染的——在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过。注意一定要在控制dialog的布尔值变为。，这样就能顺利获取到DOM啦~
Echarts报错Error in mounted hook: “Error: Initialize failed: invalid dom.“
m0_74087046的博客
05-27 5691
Error in mounted hook: "Error: Initialize failed: invalid dom."
slot插槽 echart报错Dom：[Vue warn]: Error in mounted hook: “Error: Initialize failed: invalid dom.“found
努力飞起的菜鸟
06-21 4001
[Vue warn]: Error in mounted hook: "Error: Initialize failed: invalid dom." found in
Vue Echarts报错 Error: Initialize failed: invalid dom.
m0_60822033的博客
11-18 910
Vue Echarts报错 Error: Initialize failed: invalid dom.
dialog里的dom获取异常分析Error: Initialize failed: invalid dom
最新发布
weixin_46935703的博客
10-10 2580
原因：mounted只能处理dom直接放到界面的情况，如果想将：如：echart组件使用的dom放到dialog里，可以监听dialog设置的open事件，当dialog打开时，它会挂在dialog里设置的dom，原因：在上次关闭dialog后，dialog里的组件已经挂载完成，关闭弹窗时并没有销毁，所以再次打开能够获取到dom。原因：dialog打开时，dom还没挂载完就访问，出现异常，使用nextTick或setTimeout即可。1、dialog必须打开后，才会挂载dom，
this.$refs.xxx的小坑，Error in mounted hook “Error Initialize failed invalid dom.“
m0_67394360的博客
03-08 4787
最近在vue项目中使用echarts的时候遇到报错，Error in mounted hook: “Error: Initialize failed: invalid dom.”，这个错误就是dom元素还没准备就绪，但是我在mouted中初始化echarts，按理说不该报这个错。 反复查看代码，也没有问题，最终发现this.refs.chart−1打印出来为NaN...，但是打印this.refs.chart-1打印出来为NaN...，但是打印this.refs.chart−1打印出来为NaN...，但是打
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
解决vue中el-tab-pane切换的问题
10-15
在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是...
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui中元素滚动时el-option超出元素区域的问题
12-01
popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body) popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件. popperEl并没有监听滚动...
this.$refs.xxx的小坑，Error in mounted hook: “Error: Initialize failed: invalid dom.“
Dell_Rockn的博客
12-29 3877
最近在vue项目中使用echarts的时候遇到报错，Error in mounted hook: "Error: Initialize failed: invalid dom."，这个错误就是dom元素还没准备就绪，但是我在mouted中初始化echarts，按理说不该报这个错。 反复查看代码，也没有问题，最终发现this.$refs.chart-1打印出来为NaN...，但是打印this.$refs控制台看到里面是有chart-1对象的，最后改名chart-1 ---&g...
使用echart的图表中：Initialize failed: invalid dom 之 dom加载出现的问题
Anony_me的博客
06-10 1838
报错原因：Initialize failed: invalid dom 引入 因为在还没加载的时候，option 获取元素，就开始检测，并尝试去获取它，但是在vue中引用的中，发现在模板dom还没加载的时候 就已经开始执行，所以会报错 2、解决办法： 根本原因就是dom没加载，echarts没有检测到dom，那么我就让dom加载后再去获取dom，就把echarts.init()这部分数据放在onMounted里面执行，也就是挂载完成之后执行...
ncaught Error: Initialize failed: invalid dom. 问题解决
weixin_42065453的博客
08-04 5135
传递给 Vue 初始化函数的选择器参数无效。请确保选择器参数正确地指向一个有效的 DOM 元素。这个错误表示在初始化过程中出现了无效的 DOM 元素。选项中指定的 DOM 元素无效。请确保指定的 DOM 元素存在于文档中，并且它是一个有效的元素。选项在初始化后被修改为无效的 DOM 元素。如果你在初始化后尝试更改 Vue 实例的。或类似的方法来获取正确的 DOM 元素，并将其传递给 Vue 初始化函数。选项，确保新指定的 DOM 元素是有效的，并且它存在于文档中。
Error in nextTick: “Error: Initialize failed: invalid dom.“ found in
bpluoxong的博客
07-07 6289
这里主要是原因是dom还没挂载完成，导致报错，这里有几个处理办法：1.1 这里不要用created（用mounted），created这时候还只是创建了实例，但模板还没挂载完成 1.2 用this.$nextTick(()=>{}) (这个回调函数会在数据挂载更新完之后执行，所以可行) 1.3 使用Promise...
Vue Echarts报错Initialize failed: invalid dom.
热门推荐
weixin_52418790的博客
03-23 1万+
报错原因 dom还没挂载完成，echarts.init() 就已经开始执行 解决方法 1.不要用created（用mounted），created这时候还只是创建了实例，但模板还没挂载完成 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 也就是说created()方法是在页面加载前调用，此时dom还未加载。所以当 有改变dom的时候用mounted， 没.
Vue获取el-table中某一行dom元素及根据父元素获取子元素dom
MISS_zhang_0110的博客
07-14 4506
但是有点时候是得到的数组是空，是因为一开始表格没有值，在获取值的外边写一个 二、根据父元素获取子元素dom 链接: https://blog.csdn.net/AzeShinja/article/details/120762028 链接: https://www.csdn.net/tags/NtzaUgysNTk2MDYtYmxvZwO0O0OO0O0O.html...
Echarts 报错Initialize failed: invalid dom.多个原因解析
朝花夕拾的博客
04-14 1625
第一种普遍原因是dom元素没有加载完就调用了echarts.init 但是dom元素没有获取到。this.$next(()=>{ // 微任务。//todo 放着里面 //宏任务。利用事件循环机制 微任务宏任务。是dom元素直接清空了。
el-dialog中的元素refs获取不到
07-11
2. 如果您是在 el-dialog 组件中使用了异步组件或者延迟加载的内容，那么在 el-dialog 打开后才能获取到该元素的 refs。您可以监听 el-dialog 的 `opened` 事件，并在该事件中获取元素的 refs。 3. 如果您是在 el-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值