Vue 报错Error in mounted hook “TypeError Cannot read properties of null (reading ‘getAttribute‘)“

最新推荐文章于 2024-09-12 18:27:39 发布
最新推荐文章于 2024-09-12 18:27:39 发布
阅读量3k 收藏
点赞数
分类专栏： 前端 html 文章标签： vue.js 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67400972/article/details/123266628
版权
在使用Echarts配置地图的Vue项目中，开发者遇到'Error in mounted hook: "TypeError: Cannot read properties of null (reading ‘getAttribute’)'"的错误。尽管VSCode未报错，但在开发者工具中错误依然存在，导致地图无法显示。经过排查，问题出在将Echarts挂载到的div元素上，原本使用的是class，而代码中读取的是id。修正为正确的id后，错误消失，地图成功显示。这次经历提醒我们注意细节，小问题也可能导致大困扰。
摘要由CSDN通过智能技术生成

搭建项目配置Echarts地图时，在运行时vscode不会报错正常运行，但开发者工具仍然报出“Error in mounted hook: "TypeError: Cannot read properties of null (reading ‘getAttribute’)"错误，并且不显示配置地图，具体如下

【解决过程】：

在CSDN，掘金，简书等一系列查找都没有看到相对应的解决方法，一脸懵，里面大多数报错都是跟自己相类似的，但又完全不是的

查看代码，并没有发现什么异常

将代码使用控制台打印，能正常显示，且不出现报错情况，顿时赶脚不妙

一时间都能打印出来，查看地图配置区域，发现是id值，而自己div里给的是class

最低0.47元/天 解锁文章
m0_67400972
关注
专栏目录
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
weixin_36106791的博客
07-15 2881
问题出现场景 今天在vue中引入echarts时，运行报错 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】 ## 问题排查 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： var myChart = echarts.init(this.$refs.map)
js | TypeError: Cannot read properties of null (reading ‘indexOf’) 【解决】
最新发布
qq_34419312的博客
09-12 6013
js | TypeError: Cannot read properties of null (reading ‘indexOf’) 【解决】
Vue 报错Error in mounted hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)“
热门推荐
weixin_60364883的博客
12-07 3万+
搭建项目配置Echarts地图时，在运行时vscode不会报错正常运行，但开发者工具仍然报出“Error in mounted hook: "TypeError: Cannot read properties of null (reading 'getAttribute')"错误，并且不显示配置地图，具体如下 【解决过程】： 在CSDN，掘金，简书等一系列查找都没有看到相对应的解决方法，一脸懵，里面大多数报错都是跟自己相类似的，但又完全不是的 查看代码，并没有发现什么异常 ...
[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)
陈新科的博客
09-12 1万+
一、在运行Vue项目时出现了上述错误 出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化， 利用Vue中的ref和$refs 来代替document.getElementById（）获取该图形容器对象 <div id="mian" ref="chart" ></div> var myChart = this.$echarts.init(this.$refs.chart); 二、想在el-dialog对话框中展示Echarts图表时，出现了如上错误 通过
[Vue warn] Error in mount hook “TypeError Cannot read properties of null (reading ‘getAttribute‘)
web18484626332的博客
03-09 1013
在vue项目中，使用echarts报一下的错误： [Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘) 出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化， 利用Vue中的ref和$refs 来代替document.getElementById（）获取该图形容器对象 <div id="mian" ref="chart" ><
【前端可视化】Echarts 报错：[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (readi...
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
03-12 498
错误原因 出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化， 利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象 <div id="mian" ref="chart" ></div> .... var myChart = this.$echarts.init(this.$refs.chart);...
Error in mounted hook: "TypeError: Cannot read properties of null (reading 'getAttribute')"
08-18
- *1* *3* [Vue 报错Error in mounted hook: “TypeError: Cannot read properties of null (reading ‘getAttribute...](https://blog.csdn.net/weixin_60364883/article/details/121759164)[target="_blank" data-...
Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null
soul_rules的博客
12-12 2764
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute’ of null” vue 中dialog中嵌套图表问题 今天遇到这个错误是在使用vue 弹出框dialog中使用echarts图表，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，解决方法是如下： met...
Vue 报错Error in mounted hook “TypeError Cannot read properties of null (reading ‘getAttribute‘)
m0_60567881的博客
04-03 482
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】.png)CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Android项目入口页面设置
2401_84446919的博客
04-28 577
项目中：AndroidManifest.xml中此段代码 放置在哪个activity标签中 则哪个activity为入口。11，transform、translate、transition 分别是什么属性？14，对前端性能优化有什么了解？13，javascript 的垃圾回收机制讲一下,6，DOM 事件有哪些阶段？5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。2，如何实现一个最大的正方形。3，一行水平居中，多行居左。1，判断 js 类型的方式。
TypeError: Cannot read properties of null (reading ‘indexOf‘)
m0_49608552的博客
05-11 1万+
Cannot read properties of null (reading 'indexOf')问题解决
Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘style‘)“
本郡主是喵
06-29 6714
钩子函数中的操作不依赖于组件的 DOM 元素。如果需要等待组件的 DOM 元素完全加载或渲染，请考虑使用。钩子函数中访问的数据属性或计算属性是否被正确定义和初始化。确保被引用的属性存在，并且已经被正确赋值。如果你能提供更多的代码或具体的错误上下文，我将能够给出更准确的建议来帮助你解决这个问题。钩子函数中发生，它表示在该钩子函数中尝试读取一个未定义的对象的。这个错误通常在 Vue 组件的。钩子函数来执行相关操作。
vue项目使用echart，报错Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ini
xiaommxhxxl的博客
04-04 5935
踩坑，在vue中使用echart绘制图表的时候报错Error in mounted hook: "TypeError: Cannot read properties of undefined (reading init )"解决办法 1、导入包的方式不对，使用官方新的导入方式。 原来导入方式 import echarts from 'echarts'; 更新导入方式为 import * as echarts from 'echarts'; 2、默认的安装方式安装的是最新版本，太新的版本.
TypeError: Cannot read properties of null (reading ‘getAttribute‘)
YCQNB_的博客
05-14 3721
在使用第三方库的tab栏切换时，我们需要带调用里面的dom元素时 遇到这种问题时，是因为我们使用了第三方的库 获取不到dom元素，在页面渲染的时候我们获取不到第三方库的dom元素所致，和vue的生命周期函数有关 解决方法 1.需要使用vue的异步加载方法this.$nextTick(()=>{}) 2.我们需要监听第三方库的click或者change事件 ...
Error in mounted hook: "TypeError: Cannot read properties of null (reading 'getAttribute')
09-09
根据引用中提供的信息，"Error in mounted hook: 'TypeError: Cannot read properties of null (reading 'getAttribute')"错误通常是由于获取元素的方式不正确导致的。在这个例子中，开发者在配置Echarts地图时，使用了getElementById()方法来获取图形容器对象，但是出现了错误。根据引用中的内容，可以使用Vue中的ref和$refs来替代getElementById()方法。 在Vue的模板中，可以使用ref属性来给元素命名，然后在mounted钩子函数中通过this.$refs来获取这个元素。通过这种方式获取到的元素对象可以被传递给Echarts来进行初始化。 在这个问题中，开发者可能在配置Echarts地图时没有正确地使用ref属性，导致获取到的对象为null，从而引发了"TypeError: Cannot read properties of null (reading 'getAttribute')"错误。解决这个问题的方法是将图形容器的ref属性设置为equan，然后在mounted钩子函数中使用this.$refs['equan']来获取该图形容器对象。这样就可以正确地获取到元素对象，并进行地图的配置和初始化了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值