您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue異步加載dom元素之后無法獲得如何解決”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“vue異步加載dom元素之后無法獲得如何解決”文章能幫助大家解決問題。
vue存在大量的異步加載問題,比如動態(tài)創(chuàng)建dom元素,若你緊接著去獲取創(chuàng)建的dom元素是獲取不到的。
第一種辦法比較low,使用setTimeout方法,讓獲取dom的代碼在動態(tài)創(chuàng)建元素之后一段時間(這個時間非常的短)去執(zhí)行。但這種方法應該是存在風險的,不推薦。
第二種辦法 在將要執(zhí)行的代碼上套一層 this.$nextTick()
例如:
this.$nextTick(function() { let grids = _that.$refs.datamessage; console.log(grids); for (let i = 0; i < grids.length; i++) { let xb = grids[i].getAttribute("index"); //alert(xb); if (_that.value.indexOf(xb) != -1) { grids[i].setAttribute("ifSelect", "true"); grids[i].style.backgroundColor = "#b3d8ff"; grids[i].style.color = "#409eff"; } } });
**由于彈框由v-if控制,在初始頁面渲染的時候,并不存在該Dom元素,所以在mounted中,獲取不到該彈框的Dom元素,無法添加原生時間,如下拉加載**
下面提供穩(wěn)健的獲取彈框Dom元素的方法,
首先,由于彈框是由v-if判斷,則可以在watch中監(jiān)聽v-if所對應的變量,在為true時,則彈框打開,此時去獲取DOM元素,發(fā)現(xiàn)仍然獲取不到。。。。
此時,需要將獲取事件轉(zhuǎn)為異步執(zhí)行,即寫在setTimeout中,即可。穩(wěn)健一些,可以在nextTck中寫出。
(仍舊會存在問題)
若在Element提供的彈框回調(diào)中(彈框打開動畫結(jié)束),則可以保證取到
<el-dialog :visible.sync="dialogVisible" ref="dialog" @opened="dialogOpened" >
dialogOpened() { this.$nextTick(() => { setTimeout(() => { let scrollContent = document.getElementById("scrollContent"); if (scrollContent) { scrollContent.addEventListener("scroll", this.onScroll); console.log("獲取到滾動節(jié)點----"); } else { console.log("未獲取到滾動節(jié)點===="); } }); }); }
因為可能數(shù)據(jù)是異步獲取而后填入DOM中,則可以在更新函數(shù)中進行獲取DOM的操作,但此時,需要加很多限制,因為無法限制由誰引起的更新!需要標志位減少獲取次數(shù)。
可以通過在watch監(jiān)聽函數(shù)中,進行標志位的更改。
有此想法的前提,是在給element UI 彈框中,嵌套了標簽頁 ,在每次切換標簽頁的過程中,DOM都會銷毀,所以對DOM獲取時機的把握比較關(guān)鍵,而根據(jù)標簽頁中的數(shù)據(jù)是否渲染完畢后,去獲取改DOM容器,可以說是相當穩(wěn)健。
無法獲取Element彈窗內(nèi)嵌套的組件問題
問題:當在el-dialog內(nèi)嵌套組件時,若el-dialog沒有打開,則獲取不到其內(nèi)部嵌套的內(nèi)容,ref也不可以
解決方法:在翻閱Element 隱藏滾動條部分的源碼時,發(fā)現(xiàn)其獲取dom元素的方法是通過computed來獲取
經(jīng)過驗證,可以在彈框打開的回調(diào)里面,利用計算屬性進行獲取
<el-dialog ref="dialog" @opened="dialogOpened"> <div ref="innerContent"></div> </el-dialog>
computed:{ getInnerDom(){ //此時之只能獲取到dialog console.log(this.$refs) return this.$refs.innerContent } } methods:{ dialogOpened(){ //此時可以獲取到內(nèi)容節(jié)點 console.log(this.getInnerDom) } }
關(guān)于“vue異步加載dom元素之后無法獲得如何解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。