[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)

已于 2023-04-19 11:16:59 修改
阅读量625 收藏 2
点赞数 1
文章标签： vue.js echarts 前端
于 2023-04-19 11:16:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gx0525_/article/details/130239657
版权
当使用Echarts时遇到因图形容器未生成导致的初始化错误，可以改用Vue的$refs属性来正确获取图表容器。将原始的DOM选择方式替换为Vue的引用方式，如`varmyChart=this.$echarts.init(this.$refs.chart);`，这确保了在图形容器存在的情况下进行初始化。
摘要由CSDN通过智能技术生成

使用Echarts报这个错误原因是Echarts的图形容器还未生成就对其进行了初始化，

 <div id="chart" />
 var myChart = echarts.init(document.getElementById('chart'));

换成vue 的 $refs 获取该图形容器对象就可以了

 <div id="chart" ref="chart" />
 var myChart = this.$echarts.init(this.$refs.chart);
我是关小花
关注
[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) 解...
Vue3 - 解决报错 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore‘)
王佳斌
07-16 4074
vue3，nuxt3，无法读取null的属性（读取“insertBefore”），vue3 insertBefore，报错，Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore‘)，详细解决，v-if 导致，v-show，渲染时报错，dom元素，改变时报错，组件，插件，vue版本升级，依旧报错，还是不行，改了还报错，点击按钮展示弹框报错，本地启动时，页面所有操作正常，显示正常；部署到生产环
Vue 报错Error in mounted hook “TypeError Cannot read properties of null (reading ‘getAttribute‘)“
m0_67400972的博客
03-03 3080
搭建项目配置Echarts地图时，在运行时vscode不会报错正常运行，但开发者工具仍然报出“Error in mounted hook: "TypeError: Cannot read properties of null (reading ‘getAttribute’)"错误，并且不显示配置地图，具体如下 【解决过程】： 在CSDN，掘金，简书等一系列查找都没有看到相对应的解决方法，一脸懵，里面大多数报错都是跟自己相类似的，但又完全不是的 查看代码，并没有发现什么异常 将代码使用控制台打印，能正常显
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‘)
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" ><
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)
Vue 报错Error in render “TypeError Cannot read properties of null (reading ‘xxx’)” found in
m0_67401920的博客
03-09 2235
前端vue报错 [Vue warn]: Error in render: “TypeError: Cannot read properties of null (reading ‘name’)” found in reading 'Type’返回值接收时出Type错误往下翻 这个错误是不能加载属性为null的类型 我用了一个笨办法，把页面上的参数null值都ctrl+f标注出来然后都修改成0（例：id：0），然后我发现当前页面的错误并没有改变， 最后我定位到了错误不在当前也买你，在我调用的子组件里面，我调
【前端可视化】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);...
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"
DreamFJ的博客
04-15 1936
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"
vue运行报错 Error in created hook: “TypeError: Cannot read property ‘className‘ of null“
friend_ship的博客
08-09 1万+
export default { methods: { getAllList() { this.$http.get('/api/list').then( res => { console.log(res) }) } }, mounted() {...
vue引入echarts报错Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘
qq_33298964的博客
01-12 911
在一个已有VUE项目中引入echarts报错，可能引起错误的原因是echarts引入方式错误。
TypeError: Cannot read properties of null (reading ‘indexOf‘)
m0_49608552的博客
05-11 1万+
Cannot read properties of null (reading 'indexOf')问题解决
echarts报错：Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
“山水一程”博客
03-14 1万+
echarts， Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'init')"
[Vue warn]: Error in created hook: "TypeError: Cannot read properties of null (reading 'getAttribute')"
05-25
这个错误通常是由于在 `created` 钩子函数中访问了一个尚未渲染的元素或组件的属性导致的。你可以检查一下 `created` 钩子函数中的代码，看看是否有通过 `querySelector` 或 `getElementById` 等方法获取元素的属性。如果是这样，请确保元素已经正确地被渲染到页面上，可以在 `mounted` 钩子函数中进行操作。如果问题仍然存在，请提供更多的代码细节和上下文，以便更好地进行排查。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值