vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
vue動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs獲取dom無(wú)法獲取問題
場(chǎng)景:在循環(huán)的列表上綁定了 ref, 想當(dāng)數(shù)據(jù)動(dòng)態(tài)渲染完了,然后獲取列表,接著就是獲取不到了
解決辦法
在請(qǐng)求數(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 被用來(lái)給元素或子組件注冊(cè)引用信息。
引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,如果用在子組件上,引用就指向組件實(shí)例。
如果使用 v-if dom 就不會(huì)被渲染 ref 會(huì)一直獲取的是undifined,這時(shí)可以利用下面方式獲取數(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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染
- vue根據(jù)權(quán)限動(dòng)態(tài)渲染按鈕、組件等的函數(shù)式組件實(shí)現(xiàn)
- vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
- vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)渲染組件思路詳解
- vue項(xiàng)目動(dòng)態(tài)渲染input,綁定的參數(shù)不實(shí)時(shí)更新問題
相關(guān)文章
Vue.js更改調(diào)試地址端口號(hào)的實(shí)例
今天小編就為大家分享一篇Vue.js更改調(diào)試地址端口號(hào)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09Vue3+Vite實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)實(shí)例代碼
我們?cè)陂_發(fā)大型系統(tǒng)的時(shí)候一般都需要?jiǎng)討B(tài)添加路由,下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01npm安裝vue腳手架報(bào)錯(cuò)警告npm WARN deprecated
安裝vue腳手架報(bào)錯(cuò)可能具體原因比較多,可以根據(jù)報(bào)錯(cuò)信息進(jìn)行排查,本文主要介紹了npm安裝vue腳手架報(bào)錯(cuò)警告npm WARN deprecated,感興趣的可以了解一下2023-11-11使用vue-element-admin框架從后端動(dòng)態(tài)獲取菜單功能的實(shí)現(xiàn)
​ vue-element-admin是一個(gè)純前端的框架,左側(cè)菜單是根據(jù)路由生成的。實(shí)際開發(fā)中經(jīng)常需要根據(jù)當(dāng)前登陸人員的信息從后端獲取菜單進(jìn)行展示,本文將詳細(xì)介紹如何實(shí)現(xiàn)該功能2021-04-04