解決vue頁(yè)面DOM操作不生效的問題
現(xiàn)象：
使用Element UI渲染了一個(gè)樹形結(jié)構(gòu)，設(shè)計(jì)在鼠標(biāo)移入每個(gè)節(jié)點(diǎn)是顯示其中的操作按鈕，效果如下：
下面是出錯(cuò)部分：
在新增節(jié)點(diǎn)后移入新增節(jié)點(diǎn)附近(圖中是移入一級(jí)2)，功能按鈕的顯示位置出現(xiàn)偏移
原因查找：
經(jīng)過(guò)調(diào)試發(fā)現(xiàn)是在新增節(jié)點(diǎn)后，執(zhí)行DOM操作獲取節(jié)點(diǎn)時(shí)，取到的仍是之前的結(jié)構(gòu)，新增的節(jié)點(diǎn)并未獲取到。
原因分析：
猜測(cè)是vue使用的虛擬DOM，使得頁(yè)面雖然已經(jīng)渲染出來(lái)，但在Vue實(shí)例中讓處在在虛擬DOM中，無(wú)法獲取。
解決方法：
使用Vue.nextTick，看下官方材料：
‘在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)'，這句話不是特別理解，不過(guò)可以看出DOM更新是一個(gè)循環(huán)的過(guò)程，在過(guò)程結(jié)束之前無(wú)法獲取到真實(shí)的DOM元素(至于這個(gè)循環(huán)是多久，還在探索中)。而將DOM操作放在nextTick中操作便可以獲取到更新后的DOM。
結(jié)果：
依據(jù)上述原理，將DOM操作的函數(shù)在更新數(shù)據(jù)后在nextTick里調(diào)用，實(shí)現(xiàn)了理想中的效果。
以上這篇解決vue頁(yè)面DOM操作不生效的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
我們不光要學(xué)會(huì)Vue的組件化實(shí)現(xiàn)過(guò)程,還要懂得組件數(shù)據(jù)發(fā)生變化,更新組件的過(guò)程,這篇文章主要給大家介紹了關(guān)于Vue3組件更新過(guò)程的相關(guān)資料,需要的朋友可以參考下2022-04-04
el-table?樹形數(shù)據(jù)?tree-props?多層級(jí)使用避坑
本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級(jí)使用避坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要為大家介紹了使用vue實(shí)現(xiàn)玉兔迎春圖高亮示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問題及解決
這篇文章主要介紹了vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue登錄頁(yè)面回車執(zhí)行事件@keyup.enter.native問題
這篇文章主要介紹了vue登錄頁(yè)面回車執(zhí)行事件@keyup.enter.native問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
基于Vue3和element-plus實(shí)現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實(shí)現(xiàn)一個(gè)完整的登錄功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
本文通過(guò)實(shí)例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了使用Vant如何完成各種Toast提示框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue實(shí)現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實(shí)現(xiàn)畫筆回放，canvas轉(zhuǎn)視頻播放功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2024-01-01