解决在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实现小购物车功能

    Vue实现小购物车功能

    这篇文章主要为大家详细介绍了Vue实现小购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 如何通过shell脚本自动生成vue文件详解

    如何通过shell脚本自动生成vue文件详解

    这篇文章主要给大家介绍了关于如何通过shell脚本自动生成vue文件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • Ubuntu22.04使用nginx部署vue前端项目的详细教程

    Ubuntu22.04使用nginx部署vue前端项目的详细教程

    这篇文章主要给大家介绍了关于Ubuntu22.04使用nginx部署vue前端项目的详细教程,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下
    2024-03-03
  • .eslintrc配置目录及配置项的使用方式

    .eslintrc配置目录及配置项的使用方式

    这篇文章主要介绍了.eslintrc配置目录及配置项的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3.0路由自动导入的方法实例

    vue3.0路由自动导入的方法实例

    这篇文章主要给大家介绍了关于vue3.0路由自动导入的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Vuex中mutations与actions的区别详解

    Vuex中mutations与actions的区别详解

    下面小编就为大家分享一篇Vuex中mutations与actions的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中nextTick用法实例

    vue中nextTick用法实例

    在本篇文章里小编给大家整理了关于vue中nextTick用法实例以及相关代码内容,需要的朋友们可以参考下。
    2019-09-09
  • Vue通过getAction的finally来最大程度避免影响主数据呈现问题

    Vue通过getAction的finally来最大程度避免影响主数据呈现问题

    这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue 实现websocket发送消息并实时接收消息

    vue 实现websocket发送消息并实时接收消息

    这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建,本文给大家分享实例代码,需要的朋友可以参考下
    2019-12-12
  • vue的hash值原理也是table切换实例代码

    vue的hash值原理也是table切换实例代码

    这篇文章主要介绍了vue的hash值原理也是table切换,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12

最新评论