vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
1.原因
如果在 DOM 結構中的某個 DOM 節(jié)點使用了 v-if
、v-show
或者 v-for
(即根據獲取到的后臺數(shù)據來動態(tài)操作 DOM,即響應式),那么這些 DOM 是不會在 mounted
階段找到的。
mounted
階段,一般是用于發(fā)起后端請求,獲取數(shù)據,配合路由鉤子做一些事情。簡單來說就是在 mounted
鉤子中加載數(shù)據而已,加載回來的數(shù)據是不會在這個階段更新到 DOM 中的。
所以在 mounted
鉤子中使用 $refs
,如果 ref
是定位在有 v-if
、v-for
、v-show
的 DOM 節(jié)點中,返回來的只能是 undefined
,因為在 mounted
階段他們根本不存在。
如果說 mounted
階段是加載階段,那么 updated
階段則是完成了數(shù)據更新到 DOM 的階段(對加載回來的數(shù)據進行處理),此時,再使用 this.$refs.xx
,就 100% 能找到該 DOM 節(jié)點。
updated
與 mounted
不同的是,在每一次的 DOM 結構更新,Vue.js 都會調用一次 updated
鉤子函數(shù)!而 mounted
鉤子函數(shù)僅僅只執(zhí)行一次而已。
2.解決:使用$nextTick
Vue 實現(xiàn)響應式并不是數(shù)據發(fā)生變化之后 DOM 立即變化,而是按一定的策略進行 DOM 的更新。
$nextTick 是在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調,在修改數(shù)據之后使用 $nextTick,則可以在回調中獲取更新后的 DOM。
3.動態(tài)綁定ref并使用v-for,使用this.$refs[refName]無法獲取ref
原因
解決
將this.$refs[refName]改為this.$refs[refName][0]即可
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Nuxt.js實現(xiàn)一個SSR的前端博客的示例代碼
這篇文章主要介紹了Nuxt.js實現(xiàn)一個SSR的前端博客的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09