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