解决在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()即可
代码如下:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Ubuntu22.04使用nginx部署vue前端项目的详细教程
这篇文章主要给大家介绍了关于Ubuntu22.04使用nginx部署vue前端项目的详细教程,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下2024-03-03Vue通过getAction的finally来最大程度避免影响主数据呈现问题
这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
最新评论