欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue通過ref獲取不到$refs問題

 更新時(shí)間：2023年01月23日 11:31:23   作者：吃~貨  
這篇文章主要介紹了Vue通過ref獲取不到$refs問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue通過ref獲取不到$refs

今天寫項(xiàng)目時(shí)發(fā)現(xiàn)一個(gè)問題，就是明明已經(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所在的標(biāo)簽不要用v-if，使用v-show就好了。并且ref的父級標(biāo)簽也不要用v-if。能用v-show就用v-show。否則就會出現(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ù)觀測、屬性和方法的元素，watch/event事件回調(diào)。但是，掛載階段還沒有開始，所以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ù)后臺數(shù)據(jù)動態(tài)操作DOM），那么這些DOM 在mounted階段是不存在的。

在mounted鉤子中加載回來的數(shù)據(jù)不會在這個(gè)階段更新到DOM中。所以在mounted鉤子中使用$refs獲取有v-if、v-for、v-show 的DOM節(jié)點(diǎn)，返回來的會是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)文章

最新評論