解决在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通过ref父子组件拿值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于vue实现离线地图+leaflet+高德瓦片的详细代码,Vue Leaflet是一种结合了Vue框架和Leaflet库的前端技术,用于展示和操作天地图,需要的朋友可以参考下2023-10-10
使用 Docker,你可以创建一个包含 Vue.js 应用程序的容器镜像,并在任何支持 Docker 的环境中运行该镜像,这篇文章主要介绍了VUE 项目用 Docker+Nginx进行打包部署,需要的朋友可以参考下2024-06-06
el-checkbox-group 的v-model无法绑定对象数组的问题解决
elementUI官方文档中el-checkbox-group组件绑定的都为一维数组，本文主要介绍了解决el-checkbox-group 的v-model无法绑定对象数组，感兴趣的可以了解一下2023-05-05
下面小编就为大家分享一篇vue.js给动态绑定的radio列表做批量编辑的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了Vue实现通知或详情类弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue3中element-plus全局使用Icon图标的过程详解
我们在用vue开发网站的时候,往往图标是起着很重要的作,这篇文章主要给大家介绍了关于Vue3中element-plus全局使用Icon图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了vue踩坑日记之params传递参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题
这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
在前端开发中,Vue.js 是一个广泛使用的框架,因其灵活性和强大的功能,得到许多开发者的喜爱,Vue 3 的发布为这一框架带来了很多新的特性和改进,在本文中,我们将详细讨论如何在 Vue 3 中创建和使用全局组件,并通过示例代码展示具体实现方式,需要的朋友可以参考下2024-07-07
最新评论