vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決
vue動態(tài)渲染數(shù)據(jù)時使用$refs獲取dom無法獲取問題
場景:在循環(huán)的列表上綁定了 ref, 想當(dāng)數(shù)據(jù)動態(tài)渲染完了,然后獲取列表,接著就是獲取不到了
解決辦法
在請求數(shù)據(jù)了以后,方法內(nèi)后, 加上
this.$nextTick(() => { // 在這里獲取 this.$refs.dom })
列子
messList().then(res => { ? ? ?console.log(res) ? ? ?Toast.success('獲取成功') ? ? ?this.contentlist = [...res.data.data] ? ? ?this.$nextTick(() => { ? ? ? ? ?this.sideWrap() ? ? ?}) ?})
vue中$refs取值是undefined
ref 被用來給元素或子組件注冊引用信息。
引用信息將會注冊在父組件的 $refs 對象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,如果用在子組件上,引用就指向組件實例。
如果使用 v-if dom 就不會被渲染 ref 會一直獲取的是undifined,這時可以利用下面方式獲取數(shù)據(jù)
<div :class="currentStep==0?'el-form-item-show':'el-form-item-hidden'">
.el-form-item-hidden {display: none;} .el-form-item-show {display: block;}
或者使用setTimeout得到數(shù)據(jù)
setTimeout(() => { }, 0)
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Vite實現(xiàn)動態(tài)路由的詳細(xì)實例代碼
我們在開發(fā)大型系統(tǒng)的時候一般都需要動態(tài)添加路由,下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite實現(xiàn)動態(tài)路由的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07npm安裝vue腳手架報錯警告npm WARN deprecated
安裝vue腳手架報錯可能具體原因比較多,可以根據(jù)報錯信息進(jìn)行排查,本文主要介紹了npm安裝vue腳手架報錯警告npm WARN deprecated,感興趣的可以了解一下2023-11-11使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
​ vue-element-admin是一個純前端的框架,左側(cè)菜單是根據(jù)路由生成的。實際開發(fā)中經(jīng)常需要根據(jù)當(dāng)前登陸人員的信息從后端獲取菜單進(jìn)行展示,本文將詳細(xì)介紹如何實現(xiàn)該功能2021-04-04