this.$refs.xxx的小坑，Error in mounted hook: “Error: Initialize failed: invalid dom.“

最新推荐文章于 2024-04-19 09:41:14 发布
最新推荐文章于 2024-04-19 09:41:14 发布
阅读量3.8k 收藏
点赞数 2
文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dell_Rockn/article/details/122219021
版权

        最近在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 ---> chart1，问题解决。

        说明Vue，ref属性绑定的name最好不要有特殊符号！！！

Dell_Rockn
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
this.$refs.xxx的小坑，Error in mounted hook “Error Initialize failed invalid dom.“
m0_67394360的博客
03-08 4782
最近在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...，但是打
Echarts报错Error in mounted hook: “Error: Initialize failed: invalid dom.“
m0_74087046的博客
05-27 5519
Error in mounted hook: "Error: Initialize failed: invalid dom."
VUE3 使用chart报错 Uncaught Error: Initialize failed: invalid dom.
最新发布
乐逍遥
04-19 361
这个错误通常出现在使用某些JavaScript框架或库时，提示该框架或库未能成功初始化，原因是提供给它的DOM元素无效或不存在。需要重新获取一下这个dom就行了，确保初始化代码在元素被成功添加到DOM之后执行。
slot插槽 echart报错Dom：[Vue warn]: Error in mounted hook: “Error: Initialize failed: invalid dom.“found
努力飞起的菜鸟
06-21 3843
[Vue warn]: Error in mounted hook: "Error: Initialize failed: invalid dom." found in
Vue Echarts报错 Error: Initialize failed: invalid dom.
m0_60822033的博客
11-18 891
Vue Echarts报错 Error: Initialize failed: invalid dom.
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
this.$toast() 了解一下？
12-03
前言 在平时的开发过程中，我们总是先写好一个组件...this.$toast({ duration: 3000, content: '这是一条消息提示' }); 没错，就是这么简单的一句话就万事大吉了（就是用 js 调用组件而已啦:face_with_monocle:）。那
Error in created hook: “Error: Initialize failed: invalid dom.“
ALDNOAH_K的博客
11-05 4797
原因分析:我这边在 created l里做了一个refresh的一个定时刷新方法,但因为我将 refresh 方法放到后面就导致先是加载了 '生产统计','能源监控',,'质量墙','生产进度监控'等这几个方法,最后载 refresh方法,这才导致报错.解决方法:将refresh 方法最前面就行,让其先执行refres。报错解析:初始化时没有获取到DOM元素。
dialog里的dom获取异常分析Error: Initialize failed: invalid dom
weixin_46935703的博客
10-10 2526
原因：mounted只能处理dom直接放到界面的情况，如果想将：如：echart组件使用的dom放到dialog里，可以监听dialog设置的open事件，当dialog打开时，它会挂在dialog里设置的dom，原因：在上次关闭dialog后，dialog里的组件已经挂载完成，关闭弹窗时并没有销毁，所以再次打开能够获取到dom。原因：dialog打开时，dom还没挂载完就访问，出现异常，使用nextTick或setTimeout即可。1、dialog必须打开后，才会挂载dom，
Sencha touch开发中使用图表EChart出现Initialize failed: invalid dom的解决办法
Runing_snailLBNL的博客
08-26 1万+
第一种方法： initialize: function(){ this.callParent(arguments); //已渲染出来 if(this.isPainted()){ //这是自定义的方法加载图表 this.onEcharts(); } else{ //如果没有，渲染出来 this.on({ painted: 'onEcharts', single:
出现 Error: Initialize failed: invalid dom 解决方法（全）
码农研究僧的博客
03-21 2358
Error: Initialize failed: invalid dom. 详细分析以及附Demo错误
element UI引入maptalks报错：Error in created hook: “Error:Invalid container when creating map: ‘map‘“
weixin_44244924的博客
03-29 387
Invalid container when creating map: 'map'"
Vue echarts初始化实例报错“in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”
qq_48009509的博客
08-20 233
解决方法1 卸载高本版的echarts，重新安装低版本的echarts npm install echarts@4.8.0 --save 解决方法2 因为新本版的echarts它的引入方式发生了改变，所有需要用新的引用方式 import * as echarts from 'echarts'
echarts报错Uncaught (in promise) Error: Initialize failed: invalid dom.
热门推荐
zkx529的博客
05-11 3万+
问题描述 在使用echarts时报错Uncaught (in promise) Error: Initialize failed: invalid dom. 原因 这是由于echarts在初始化化时是需要获取dom的。 let myChart = this.$echarts.init(document.getElementById('main')); 例如在上面这个 myChart初始化时需要获取到 id="main" 的这个dom元素，所以在图表初始化的时候获取不到dom的时候就会出现这样的
ECharts 报错：Initialize failed: invalid dom 的解决思路
Sun_blog
12-29 2万+
最近因为工作需要，用到了 ECharts 做图表，也遇到了这个问题，就来跟大家总结分享一下； 其实不论你用的是原生还是 vue 甚至是其他框架，报 Initialize failed: invalid dom 的原因并不复杂； 就是代码执行顺序的问题，在进行dom操作时，dom还没创建出来，或者直接就是你忘创建了???? 知道了报错的原因，解决办法就有很多了； 原生的就直接把对应的 js文件引到dom后面就行了； vue 什么的有对应钩子的就放在对应的钩子里，没有的就用 promise； 甚至可以直接简单
echarts图表报错 Error in created hook: “Error: Initialize failed: invalid dom.“
qq_62851576的博客
02-26 587
放在入了页面加载事件created里面，created这时候还只是创建了实例，但模板还没挂载完成。通过延迟加载getChart（）方法，使DOM先于getChart方法加载，为DOM加载提供时间。dom还没挂载完成，echarts.init() 就已经开始执行。setTimeout（）方法用于在指定毫秒数后调用。使用create情况下使用延迟加载。用mounted还是会报错。
添加点位标注报错Error in mounted hook: "TypeError: this.$refs.baiduMap.getMap is not a function"
03-25
A：这个错误通常是因为在调用 this.$refs.baiduMap.getMap() 方法时，this.$refs.baiduMap 中没有名为 getMap 的方法。 可能的原因包括： 1. 确认地图已经成功加载，否则可能会导致 this.$refs.baiduMap 为 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值