解決在el-dialog中無法正確獲取DOM的問題
更新時間：2024年03月06日 10:20:04 作者：Naaaano
這篇文章主要介紹了解決在el-dialog中無法正確獲取DOM的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
在el-dialog中無法正確獲取DOM
今天工作中有個需求是，在一個彈出框里放Echarts圖表。
眾所周知Vue里是在mounted生命周期里才能獲取到DOM，于是我理所應(yīng)當(dāng)?shù)模?/p>
mounted() {
let diameter= document.getElementById("diameter");
let diameterOption = {...};
echarts.init(diameter).setOption(diameterOption);
}
報錯，找不到DOM，無法生成echarts。但mounted里不應(yīng)該發(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后調(diào)用nextTick，這樣就能順利獲取到DOM啦~
關(guān)于在el-dialog中獲取DOM節(jié)點
場景
需求要求在el-dialog中獲取頁面中的DOM節(jié)點
問題
直接document.getElementById獲取的節(jié)點為undefined
解決
在獲取DOM節(jié)點代碼外層添加$nextTick()即可
代碼如下：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)點擊選中取消切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了關(guān)于如何利用vue3開發(fā)一個打磚塊小游戲的相關(guān)資料,通過一個小游戲?qū)嵗梢钥焖倭私鈜ue3開發(fā)小游戲的流程,需要的朋友可以參考下2021-07-07
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
通過實例解析vuejs如何實現(xiàn)調(diào)試代碼
這篇文章主要介紹了通過實例解析vuejs如何實現(xiàn)調(diào)試代碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
vue本地打開build后生成的dist文件夾index.html問題
這篇文章主要介紹了vue本地打開build后生成的dist文件夾index.html問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-09-09
通過vue-cli3構(gòu)建一個SSR應(yīng)用程序的方法
這篇文章主要介紹了通過vue-cli3構(gòu)建一個SSR應(yīng)用程序,以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。2018-09-09
vue-cli下的vuex的簡單Demo圖解(實現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡單Demo（實現(xiàn)加1減1操作）,本文圖文并茂給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
vue實現(xiàn)前端保持篩選條件到url并進行同步參數(shù)設(shè)計
這篇文章主要為大家介紹了vue實現(xiàn)前端保持篩選條件到url并進行同步參數(shù)設(shè)計思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue單文件組件lint error自動fix與styleLint報錯自動fix詳解
這篇文章主要給大家介紹了關(guān)于vue單文件組件lint error自動fix與styleLint報錯自動fix的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了詳解vue幾種主動刷新的方法總結(jié)，文中詳細的介紹了幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02