這篇文章給大家分享的是有關(guān)vue頁面DOM操作不生效怎么辦的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價值。

現(xiàn)象：

使用Element UI渲染了一個樹形結(jié)構(gòu)，設(shè)計在鼠標移入每個節(jié)點是顯示其中的操作按鈕，效果如下：

下面是出錯部分：

在新增節(jié)點后移入新增節(jié)點附近(圖中是移入一級2)，功能按鈕的顯示位置出現(xiàn)偏移

原因查找：

經(jīng)過調(diào)試發(fā)現(xiàn)是在新增節(jié)點后，執(zhí)行DOM操作獲取節(jié)點時，取到的仍是之前的結(jié)構(gòu)，新增的節(jié)點并未獲取到。

原因分析：

猜測是vue使用的虛擬DOM，使得頁面雖然已經(jīng)渲染出來，但在Vue實例中讓處在在虛擬DOM中，無法獲取。

解決方法：

使用Vue.nextTick，看下官方材料：

‘在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)'，這句話不是特別理解，不過可以看出DOM更新是一個循環(huán)的過程，在過程結(jié)束之前無法獲取到真實的DOM元素(至于這個循環(huán)是多久，還在探索中)。而將DOM操作放在nextTick中操作便可以獲取到更新后的DOM。

結(jié)果：

依據(jù)上述原理，將DOM操作的函數(shù)在更新數(shù)據(jù)后在nextTick里調(diào)用，實現(xiàn)了理想中的效果。

感謝各位的閱讀！關(guān)于“vue頁面DOM操作不生效怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！