解決vue頁面DOM操作不生效的問題
現(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)了理想中的效果。
以上這篇解決vue頁面DOM操作不生效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue版數(shù)字翻牌器的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3新特性Suspense和Teleport應用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實現(xiàn)動態(tài)加載,同時,Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達數(shù)據(jù)的動態(tài)響應，有興趣的可以了解一下2017-07-07
VUE 實現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作示例
這篇文章主要介紹了VUE 實現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作,涉及vue.js對象屬性動態(tài)操作及視圖更新相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-11-11
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來具體介紹一下,感興趣的可以了解一下2023-09-09
今天小編就為大家分享一篇vue 解決循環(huán)引用組件報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了通過Vue實現(xiàn)淘寶購物車中三級選中的功能，文中的實現(xiàn)過程講解詳細，對我們學習Vue有一定的幫助，感興趣的可以了解一下2022-01-01
關(guān)于vue路由緩存清除在main.js中的設(shè)置
今天小編就為大家分享一篇關(guān)于vue路由緩存清除在main.js中的設(shè)置，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue關(guān)于接口請求數(shù)據(jù)過大導致瀏覽器崩潰的問題
這篇文章主要介紹了vue關(guān)于接口請求數(shù)據(jù)過大導致瀏覽器崩潰的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08