vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
1.原因
如果在 DOM 結(jié)構(gòu)中的某個 DOM 節(jié)點使用了 v-if、v-show 或者 v-for（即根據(jù)獲取到的后臺數(shù)據(jù)來動態(tài)操作 DOM，即響應式），那么這些 DOM 是不會在 mounted 階段找到的。
mounted 階段，一般是用于發(fā)起后端請求，獲取數(shù)據(jù)，配合路由鉤子做一些事情。簡單來說就是在 mounted 鉤子中加載數(shù)據(jù)而已，加載回來的數(shù)據(jù)是不會在這個階段更新到 DOM 中的。
所以在 mounted 鉤子中使用 $refs，如果 ref 是定位在有 v-if、v-for、v-show 的 DOM 節(jié)點中，返回來的只能是 undefined，因為在 mounted 階段他們根本不存在。
如果說 mounted 階段是加載階段，那么 updated 階段則是完成了數(shù)據(jù)更新到 DOM 的階段(對加載回來的數(shù)據(jù)進行處理)，此時，再使用 this.$refs.xx，就 100% 能找到該 DOM 節(jié)點。
updated 與 mounted 不同的是，在每一次的 DOM 結(jié)構(gòu)更新，Vue.js 都會調(diào)用一次 updated 鉤子函數(shù)！而 mounted 鉤子函數(shù)僅僅只執(zhí)行一次而已。
2.解決：使用$nextTick
Vue 實現(xiàn)響應式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新。
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM。
3.動態(tài)綁定ref并使用v-for，使用this.$refs[refName]無法獲取ref
原因
解決
將this.$refs[refName]改為this.$refs[refName][0]即可
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)后臺管理頁面步驟
本文從整體上介紹Vue框架的開發(fā)流程，結(jié)合具體的案例，使用Vue框架調(diào)用具體的后端接口，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
vue2實現(xiàn)provide inject傳遞響應式
在看element-ui的源碼的時候，注意到源碼里面有很多地方使用provide和inject的屬性，本文主要介紹了vue2實現(xiàn)provide inject傳遞響應式，分享給大家，感興趣的可以了解一下2021-05-05
VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue?webpack打包原理解析(全網(wǎng)最新最全)
webpack是讓我們可以進行模塊化開發(fā)，并且會幫助我們處理模塊間的依賴關系，這篇文章主要介紹了vue?webpack打包原理,本篇介紹的有點長，希望大家耐心閱讀2023-02-02
這篇文章主要給大家介紹了關于前端實現(xiàn)pdf預覽功能的相關資料,前端實現(xiàn)預覽最好的效果還是PDF,不會出現(xiàn)一些文字錯亂和亂碼的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
Vue拖拽組件(Draggable)是一個允許與View-Model同步進行拖放排序的Vue組件,下面這篇文章主要給大家介紹了關于Vue.Draggable使用文檔的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要給大家介紹了關于vue中keep-alive組件的入門使用教程，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue項目啟動如何設置默認啟動頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06