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