vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問(wèn)題
1.原因
如果在 DOM 結(jié)構(gòu)中的某個(gè) DOM 節(jié)點(diǎn)使用了 v-if
、v-show
或者 v-for
(即根據(jù)獲取到的后臺(tái)數(shù)據(jù)來(lái)動(dòng)態(tài)操作 DOM,即響應(yīng)式),那么這些 DOM 是不會(huì)在 mounted
階段找到的。
mounted
階段,一般是用于發(fā)起后端請(qǐng)求,獲取數(shù)據(jù),配合路由鉤子做一些事情。簡(jiǎn)單來(lái)說(shuō)就是在 mounted
鉤子中加載數(shù)據(jù)而已,加載回來(lái)的數(shù)據(jù)是不會(huì)在這個(gè)階段更新到 DOM 中的。
所以在 mounted
鉤子中使用 $refs
,如果 ref
是定位在有 v-if
、v-for
、v-show
的 DOM 節(jié)點(diǎn)中,返回來(lái)的只能是 undefined
,因?yàn)樵?mounted
階段他們根本不存在。
如果說(shuō) mounted
階段是加載階段,那么 updated
階段則是完成了數(shù)據(jù)更新到 DOM 的階段(對(duì)加載回來(lái)的數(shù)據(jù)進(jìn)行處理),此時(shí),再使用 this.$refs.xx
,就 100% 能找到該 DOM 節(jié)點(diǎn)。
updated
與 mounted
不同的是,在每一次的 DOM 結(jié)構(gòu)更新,Vue.js 都會(huì)調(diào)用一次 updated
鉤子函數(shù)!而 mounted
鉤子函數(shù)僅僅只執(zhí)行一次而已。
2.解決:使用$nextTick
Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化,而是按一定的策略進(jìn)行 DOM 的更新。
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后使用 $nextTick,則可以在回調(diào)中獲取更新后的 DOM。
3.動(dòng)態(tài)綁定ref并使用v-for,使用this.$refs[refName]無(wú)法獲取ref
原因
解決
將this.$refs[refName]改為this.$refs[refName][0]即可
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue兩種組件類(lèi)型:遞歸組件和動(dòng)態(tài)組件的用法
這篇文章主要介紹了Vue兩種組件類(lèi)型:遞歸組件和動(dòng)態(tài)組件的用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08Vuejs開(kāi)發(fā)環(huán)境搭建及熱更新【推薦】
Vue.js是目前很火的一個(gè)前端框架,采用MVVM模式設(shè)計(jì),它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開(kāi)發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí),需要的朋友參考下吧2018-09-09vue3關(guān)于時(shí)間顯示格式化的問(wèn)題
這篇文章主要介紹了vue3關(guān)于時(shí)間顯示格式化的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼
這篇文章主要介紹了Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09利用vue寫(xiě)todolist單頁(yè)應(yīng)用
有很多關(guān)于vue的todolist小程序,這篇文章主要介紹了 用vue寫(xiě)todolist單頁(yè)應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題
這篇文章主要介紹了Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題,為了解決這個(gè)問(wèn)題,Vue提供了一個(gè)特殊的方法vm.$set(object, propertyName, value),也可以使用全局的Vue.set(object, propertyName, value)方法,需要的朋友可以參考下2023-05-05