Vue通過ref獲取不到$refs問題
Vue通過ref獲取不到$refs
今天寫項目時發(fā)現(xiàn)一個問題，就是明明已經(jīng)定義了ref，但通過$refs打印卻沒有打印出想要的結(jié)果。
代碼如下
<!-- html部分 -->
<div ref="myOrder" v-if="isOrder"></div>
// js部分
init () {
?? ?console.log(this.$refs.myOrder) //undefined
}打印結(jié)果是undefined。
后來查閱資料后發(fā)現(xiàn)問題所在：ref所在的標簽不要用v-if，使用v-show就好了。并且ref的父級標簽也不要用v-if。能用v-show就用v-show。否則就會出現(xiàn)打印$refs時，值為undefined
使用$refs獲取不到DOM元素
this.$refs.xx 為 undefined 的幾種情況：
1. 在created 鉤子函數(shù)中調(diào)用
create()在實例創(chuàng)建完成后被立即調(diào)用。這時，實例已完成數(shù)據(jù)觀測、屬性和方法的元素，watch/event事件回調(diào)。但是，掛載階段還沒有開始，所以this.$refs獲取不到DOM。
2. 獲取的是設(shè)置了v-if/v-show的元素
如果在DOM結(jié)構(gòu)中的某個DOM節(jié)點使用了v-if、v-show或v-for（根據(jù)后臺數(shù)據(jù)動態(tài)操作DOM），那么這些DOM 在mounted階段是不存在的。
在mounted鉤子中加載回來的數(shù)據(jù)不會在這個階段更新到DOM中。所以在mounted鉤子中使用$refs獲取有v-if、v-for、v-show 的DOM節(jié)點，返回來的會是undefined。
解決：
1.不在munted中獲取元素，在updated中獲取。
2.使用$nextTick:
- $nextTick是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用$nextTick，則可以在回調(diào)中獲取更新后的DOM。
if(){// 隨便舉栗子
?? ?this.a = true;// 修改數(shù)據(jù)
?? ?this.$nextTick(function () {// 調(diào)用$nextTick函數(shù)
?? ??? ?let dom1 = this.$refs.test;// o了
?? ?})
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue簡單實現(xiàn)原理,結(jié)合實例形式詳細分析了Vue實現(xiàn)原理與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue的面包屑導(dǎo)航組件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了VUE 中添加手機驗證碼組件,需要的朋友可以參考下2017-12-12
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能
這篇文章主要介紹了Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
Fragment 占位組件不生成標簽與路由組件lazyLoad案例
這篇文章主要為大家介紹了Fragment 占位組件不生成標簽與路由組件lazyLoad案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要給大家分享介紹了關(guān)于動態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細，通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題
這篇文章主要介紹了vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了element的$notify注意點，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08