解決vue頁面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)過調(diào)試發(fā)現(xiàn)是在新增節(jié)點(diǎn)后，執(zhí)行DOM操作獲取節(jié)點(diǎn)時(shí)，取到的仍是之前的結(jié)構(gòu)，新增的節(jié)點(diǎn)并未獲取到。
原因分析：
猜測是vue使用的虛擬DOM，使得頁面雖然已經(jīng)渲染出來，但在Vue實(shí)例中讓處在在虛擬DOM中，無法獲取。
解決方法：
使用Vue.nextTick，看下官方材料：
‘在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)'，這句話不是特別理解，不過可以看出DOM更新是一個(gè)循環(huán)的過程，在過程結(jié)束之前無法獲取到真實(shí)的DOM元素(至于這個(gè)循環(huán)是多久，還在探索中)。而將DOM操作放在nextTick中操作便可以獲取到更新后的DOM。
結(jié)果：
依據(jù)上述原理，將DOM操作的函數(shù)在更新數(shù)據(jù)后在nextTick里調(diào)用，實(shí)現(xiàn)了理想中的效果。
以上這篇解決vue頁面DOM操作不生效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue版數(shù)字翻牌器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3新特性Suspense和Teleport應(yīng)用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請(qǐng)求的加載提示,以及如何在組件間實(shí)現(xiàn)動(dòng)態(tài)加載,同時(shí),Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達(dá)數(shù)據(jù)的動(dòng)態(tài)響應(yīng)，有興趣的可以了解一下2017-07-07
VUE 實(shí)現(xiàn)動(dòng)態(tài)給對(duì)象增加屬性，并觸發(fā)視圖更新操作示例
這篇文章主要介紹了VUE 實(shí)現(xiàn)動(dòng)態(tài)給對(duì)象增加屬性，并觸發(fā)視圖更新操作,涉及vue.js對(duì)象屬性動(dòng)態(tài)操作及視圖更新相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來具體介紹一下,感興趣的可以了解一下2023-09-09
vue 解決循環(huán)引用組件報(bào)錯(cuò)的問題
今天小編就為大家分享一篇vue 解決循環(huán)引用組件報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue實(shí)現(xiàn)淘寶購物車三級(jí)選中功能詳解
這篇文章主要介紹了通過Vue實(shí)現(xiàn)淘寶購物車中三級(jí)選中的功能，文中的實(shí)現(xiàn)過程講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
關(guān)于vue路由緩存清除在main.js中的設(shè)置
今天小編就為大家分享一篇關(guān)于vue路由緩存清除在main.js中的設(shè)置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue關(guān)于接口請(qǐng)求數(shù)據(jù)過大導(dǎo)致瀏覽器崩潰的問題
這篇文章主要介紹了vue關(guān)于接口請(qǐng)求數(shù)據(jù)過大導(dǎo)致瀏覽器崩潰的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08