AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2021-12-10 4231
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： [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


文章标签：
JavaScript
容器
关键词：
cannot null
properties null
cannot null reading
cannot read null
read null
前端老实人
目录
相关文章
六卿
|
2月前
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件，包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
六卿
42 0
刘大猫.
|
10天前
|
JavaScript API
vue3知识点：自定义hook函数
vue3知识点：自定义hook函数
刘大猫.
21 2
游客cxtb2yf2r55as
|
29天前
|
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图标消失)
游客cxtb2yf2r55as
44 2
邹荣乐
|
18天前
|
设计模式 JavaScript 开发工具
Vue开发中使用好钩子方法（hook method）可以使你的代码更加模块化和可维护
Vue开发中使用好钩子方法（hook method）可以使你的代码更加模块化和可维护
邹荣乐
17 0
旺仔大牛
|
3月前
解决微软云Azure Function运行报错-Value cannot be null. (Parameter ‘provider‘)
解决微软云Azure Function运行报错-Value cannot be null. (Parameter ‘provider‘)
旺仔大牛
74 4
热爱技术的小郑
|
3月前
|
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完全加载后再绑定事件处理器的解决办法。
热爱技术的小郑
113 0
15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
路边两盏灯
|
3月前
|
C++ Python
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误
路边两盏灯
22 0
路边两盏灯
|
3月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行，报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行，报错 Value cannot be null. (Parameter 'provider')问题
路边两盏灯
21 0
三分钟热度的鱼
|
6月前
|
SQL 关系型数据库 MySQL
实时计算 Flink版产品使用合集之从MySQL同步数据到Doris时，历史数据时间字段显示为null，而增量数据部分的时间类型字段正常显示的原因是什么
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架，广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStreamAPI、以及与上下游数据源和存储系统的丰富连接器，提供了一套全面的解决方案，以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点，使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
三分钟热度的鱼
155 2
daotianmi
|
6月前
|
SQL 关系型数据库 MySQL
python在mysql中插入或者更新null空值
这段代码是Python操作MySQL数据库的示例。它执行SQL查询从表`a_kuakao_school`中选取`id`，`university_id`和`grade`，当`university_id`大于0时按升序排列。然后遍历结果，根据`row[4]`的值决定`grade`是否为`NULL`。若不为空，`grade`被格式化为字符串；否则，设为`NULL`。接着构造UPDATE语句更新`university`表中对应`id`的`grade`值，并提交事务。重要的是，字符串`NULL`不应加引号，否则更新会失败。
daotianmi
146 2