Vue通過ref獲取不到$refs問題
更新時間：2023年01月23日 11:31:23 作者：吃~貨
這篇文章主要介紹了Vue通過ref獲取不到$refs問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue通過ref獲取不到$refs
今天寫項目時發(fā)現一個問題，就是明明已經定義了ref，但通過$refs打印卻沒有打印出想要的結果。
代碼如下
<!-- html部分 -->
<div ref="myOrder" v-if="isOrder"></div>
// js部分
init () {
?? ?console.log(this.$refs.myOrder) //undefined
}打印結果是undefined。
后來查閱資料后發(fā)現問題所在：ref所在的標簽不要用v-if，使用v-show就好了。并且ref的父級標簽也不要用v-if。能用v-show就用v-show。否則就會出現打印$refs時，值為undefined
使用$refs獲取不到DOM元素
this.$refs.xx 為 undefined 的幾種情況：
1. 在created 鉤子函數中調用
create()在實例創(chuàng)建完成后被立即調用。這時，實例已完成數據觀測、屬性和方法的元素，watch/event事件回調。但是，掛載階段還沒有開始，所以this.$refs獲取不到DOM。
2. 獲取的是設置了v-if/v-show的元素
如果在DOM結構中的某個DOM節(jié)點使用了v-if、v-show或v-for（根據后臺數據動態(tài)操作DOM），那么這些DOM 在mounted階段是不存在的。
在mounted鉤子中加載回來的數據不會在這個階段更新到DOM中。所以在mounted鉤子中使用$refs獲取有v-if、v-for、v-show 的DOM節(jié)點，返回來的會是undefined。
解決：
1.不在munted中獲取元素，在updated中獲取。
2.使用$nextTick:
- $nextTick是在下次DOM更新循環(huán)結束之后執(zhí)行延遲回調，在修改數據之后使用$nextTick，則可以在回調中獲取更新后的DOM。
if(){// 隨便舉栗子
?? ?this.a = true;// 修改數據
?? ?this.$nextTick(function () {// 調用$nextTick函數
?? ??? ?let dom1 = this.$refs.test;// o了
?? ?})
}總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
因為現在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
使用Bootstrap + Vue.js實現表格的動態(tài)展示、新增和刪除功能
這篇文章主要介紹了使用Bootstrap + Vue.js實現表格的動態(tài)展示、新增和刪除功能,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue-cli 關閉熱更新操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 實現點擊空白處隱藏某節(jié)點的三種方式(指令、普通、遮罩）
最近小編接到這樣的需求：彈出框（或Popover）在 show 后，點擊空白處可以將其 hide。針對這個需求，小編整理了三種實現方式，如果大家對vue 點擊空白隱藏節(jié)點問題感興趣的朋友跟隨小編一起看看吧2019-10-10
這篇文章主要介紹了vue使用微信JS-SDK實現分享功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個?click?事件展開詳細內容介紹，需要的小伙伴可以參考一下2022-05-05
在許多的后臺系統(tǒng)中少不了導出Excel表格的功能,下面這篇文章主要給大家介紹了關于Vue3.0導出數據為自定義樣式Excel的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue計算屬性computed方法內傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03