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