vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決
更新時間：2023年01月23日 12:15:57 作者：TO_WebNow
這篇文章主要介紹了vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決方案，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue動態(tài)渲染數(shù)據(jù)時使用$refs獲取dom無法獲取問題
場景：在循環(huán)的列表上綁定了 ref, 想當數(shù)據(jù)動態(tài)渲染完了，然后獲取列表，接著就是獲取不到了
解決辦法
在請求數(shù)據(jù)了以后,方法內后, 加上
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)總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇Vue.js更改調試地址端口號的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3+Vite實現(xiàn)動態(tài)路由的詳細實例代碼
我們在開發(fā)大型系統(tǒng)的時候一般都需要動態(tài)添加路由,下面這篇文章主要給大家介紹了關于Vue3+Vite實現(xiàn)動態(tài)路由的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
因為現(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了Vue的混合繼承，有需要的朋友可以借鑒參考下，希望能夠有所幫助，希望能夠給你帶來幫助2021-11-11
vue如何導出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue的土著指令和自定義指令的用法講解 ,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了如何基于vue手動實現(xiàn)一個日歷組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學習一下2024-01-01
npm安裝vue腳手架報錯警告npm WARN deprecated
安裝vue腳手架報錯可能具體原因比較多,可以根據(jù)報錯信息進行排查,本文主要介紹了npm安裝vue腳手架報錯警告npm WARN deprecated,感興趣的可以了解一下2023-11-11
使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
​ vue-element-admin是一個純前端的框架，左側菜單是根據(jù)路由生成的。實際開發(fā)中經常需要根據(jù)當前登陸人員的信息從后端獲取菜單進行展示，本文將詳細介紹如何實現(xiàn)該功能2021-04-04
下面小編就為大家分享一篇vue的安裝及element組件的安裝，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03