解決在el-dialog中無法正確獲取DOM的問題
更新時間：2024年03月06日 10:20:04 作者：Naaaano
這篇文章主要介紹了解決在el-dialog中無法正確獲取DOM的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
在el-dialog中無法正確獲取DOM
今天工作中有個需求是，在一個彈出框里放Echarts圖表。
眾所周知Vue里是在mounted生命周期里才能獲取到DOM，于是我理所應當?shù)模?/p>
mounted() {
let diameter= document.getElementById("diameter");
let diameterOption = {...};
echarts.init(diameter).setOption(diameterOption);
}
報錯，找不到DOM，無法生成echarts。但mounted里不應該發(fā)生這種情況的，所以只有一種可能性：那就是el-dialog和v-if一樣，采用默認不生成DOM的方式，只有在彈框出現(xiàn)時才會生成。
知道了問題所在，就好解決了：
// 彈框的觸發(fā)事件
showDialog() {
this.isDialogShow = true;
this.$nextTick(() => {
let diameter= document.getElementById("diameter");
let diameterOption = {...};
echarts.init(diameter).setOption(diameterOption);
})
}
注意一定要在控制dialog的布爾值變?yōu)?code>true后調用nextTick，這樣就能順利獲取到DOM啦~
關于在el-dialog中獲取DOM節(jié)點
場景
需求要求在el-dialog中獲取頁面中的DOM節(jié)點
問題
直接document.getElementById獲取的節(jié)點為undefined
解決
在獲取DOM節(jié)點代碼外層添加$nextTick()即可
代碼如下：
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇Vue通過ref父子組件拿值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實現(xiàn)離線地圖+leaflet+高德瓦片的詳細代碼
這篇文章主要給大家介紹了關于vue實現(xiàn)離線地圖+leaflet+高德瓦片的詳細代碼,Vue Leaflet是一種結合了Vue框架和Leaflet庫的前端技術,用于展示和操作天地圖,需要的朋友可以參考下2023-10-10
使用?Docker,你可以創(chuàng)建一個包含?Vue.js?應用程序的容器鏡像,并在任何支持?Docker?的環(huán)境中運行該鏡像,這篇文章主要介紹了VUE?項目用?Docker+Nginx進行打包部署,需要的朋友可以參考下2024-06-06
el-checkbox-group?的v-model無法綁定對象數(shù)組的問題解決
elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組，本文主要介紹了解決el-checkbox-group?的v-model無法綁定對象數(shù)組，感興趣的可以了解一下2023-05-05
vue.js給動態(tài)綁定的radio列表做批量編輯的方法
下面小編就為大家分享一篇vue.js給動態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3中element-plus全局使用Icon圖標的過程詳解
我們在用vue開發(fā)網站的時候,往往圖標是起著很重要的作,這篇文章主要給大家介紹了關于Vue3中element-plus全局使用Icon圖標的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue踩坑日記之params傳遞參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題
這篇文章主要介紹了vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在Vue3中創(chuàng)建和使用全局組件的實現(xiàn)方式
在前端開發(fā)中,Vue.js 是一個廣泛使用的框架,因其靈活性和強大的功能,得到許多開發(fā)者的喜愛,Vue 3 的發(fā)布為這一框架帶來了很多新的特性和改進,在本文中,我們將詳細討論如何在 Vue 3 中創(chuàng)建和使用全局組件,并通過示例代碼展示具體實現(xiàn)方式,需要的朋友可以參考下2024-07-07