解决在el-dialog中无法正确获取DOM的问题
更新时间：2024年03月06日 10:20:04 作者：Naaaano
这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
在el-dialog中无法正确获取DOM
今天工作中有个需求是，在一个弹出框里放Echarts图表。
众所周知Vue里是在mounted生命周期里才能获取到DOM，于是我理所应当的：
mounted() {
let diameter= document.getElementById("diameter");
let diameterOption = {...};
echarts.init(diameter).setOption(diameterOption);
}
报错，找不到DOM，无法生成echarts。但mounted里不应该发生这种情况的，所以只有一种可能性：那就是el-dialog和v-if一样，采用默认不生成DOM的方式，只有在弹框出现时才会生成。
知道了问题所在，就好解决了：
// 弹框的触发事件
showDialog() {
this.isDialogShow = true;
this.$nextTick(() => {
let diameter= document.getElementById("diameter");
let diameterOption = {...};
echarts.init(diameter).setOption(diameterOption);
})
}
注意一定要在控制dialog的布尔值变为true后调用nextTick，这样就能顺利获取到DOM啦~
关于在el-dialog中获取DOM节点
场景
需求要求在el-dialog中获取页面中的DOM节点
问题
直接document.getElementById获取的节点为undefined
解决
在获取DOM节点代码外层添加$nextTick()即可
代码如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
我们所熟知的Vue.js也在如何提取公共代码复用方面也一直在探索优化，本文小编就来和各位聊聊Vue.js代码复用的前世今生，希望对大家学习Vue有一定的帮助2023-05-05
这篇文章主要介绍了vue debug 二种方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue-editor-bridge报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue与iframe之间的信息交互的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
element-ui el-dialog嵌套table组件,ref问题及解决
这篇文章主要介绍了element-ui el-dialog嵌套table组件,ref问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
基于Vue3+TypeScript的全局对象的注入和使用详解
这篇文章主要介绍了基于Vue3+TypeScript的全局对象的注入和使用,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了利用report分析vue项目中各文件大小问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要给大家介绍了关于vue前端更新后需要清空缓存的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Vue之父子组件传值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue3+vite使用element-plus问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论