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

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

一、在运行Vue项目时出现了上述错误

出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化,

利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象

1.一、在运行Vue项目时出现了上述错误
出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化,
利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象

二、想在el-dialog对话框中展示Echarts图表时,出现了如上错误

通过$refs获取不到 el-dialog对话框中的子组件对象,返回的都是undefined,这也就导致了上图的错误。


解决办法:


在通过this.$refs  获取el-dialog对话框中的子组件对象之前加入以下函数即可:


this.$nextTick(function () {           });


在dialog框生成后再去初始化echarts


相关文章
|
3月前
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
50 0
|
2月前
|
JavaScript API
vue3知识点:自定义hook函数
vue3知识点:自定义hook函数
26 2
|
2月前
|
Ubuntu Linux Windows
wsl重装Ubuntu遇到的一些问题( WslRegisterDistribution failed with error: 0x80041002 Error: 0x80041002 (null)、重置网络后WLAN图标消失)
wsl重装Ubuntu遇到的一些问题( WslRegisterDistribution failed with error: 0x80041002 Error: 0x80041002 (null)、重置网络后WLAN图标消失)
|
2月前
|
设计模式 JavaScript 开发工具
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
19 0
|
4月前
|
JavaScript 索引
炸裂!Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能,太丝滑了!
炸裂!Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能,太丝滑了!
炸裂!Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能,太丝滑了!
|
4月前
|
JavaScript API
【vue3】写hook这几天,治好了我不会组件封装的弱点。
【vue3】写hook这几天,治好了我不会组件封装的弱点。
|
4月前
解决微软云Azure Function运行报错-Value cannot be null. (Parameter ‘provider‘)
解决微软云Azure Function运行报错-Value cannot be null. (Parameter ‘provider‘)
84 4
|
4月前
|
JavaScript 前端开发
15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
这篇文章解释了在HTML文档中因JavaScript代码在页面元素加载之前执行导致的"Cannot set properties of null (setting ‘onclick’)"错误,并提供了将JavaScript代码置于`<body>`标签内或使用`window.onload`事件确保DOM完全加载后再绑定事件处理器的解决办法。
15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
|
4月前
|
JavaScript API 数据格式
【Vue 3】如何封装一个超级好用的 Hook!
【Vue 3】如何封装一个超级好用的 Hook!
|
4月前
|
C++ Python
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误