1. 程式人生 > >vue頁面DOM操作不生效

vue頁面DOM操作不生效

現象:

使用Element UI渲染了一個樹形結構,設計在滑鼠移入每個節點是顯示其中的操作按鈕,效果如下:
這裡寫圖片描述

下面是出錯部分:
在新增節點後移入新增節點附近(圖中是移入一級2),功能按鈕的顯示位置出現偏移
這裡寫圖片描述

原因查詢:

經過除錯發現是在新增節點後,執行DOM操作獲取節點時,取到的仍是之前的結構,新增的節點並未獲取到。

原因分析:

猜測是vue使用的虛擬DOM,使得頁面雖然已經渲染出來,但在Vue例項中讓處在在虛擬DOM中,無法獲取。

解決方法:

使用Vue.nextTick,看下官方材料:
這裡寫圖片描述
‘在下次 DOM 更新迴圈結束之後執行延遲迴調’,這句話不是特別理解,不過可以看出DOM更新是一個迴圈的過程,在過程結束之前無法獲取到真實的DOM元素(至於這個迴圈是多久,還在探索中)。而將DOM操作放在nextTick中操作便可以獲取到更新後的DOM。

結果:

依據上述原理,將DOM操作的函式在更新資料後在nextTick裡呼叫,實現了理想中的效果。

這裡寫圖片描述
這裡寫圖片描述