vue $refs動(dòng)態(tài)拼接獲取值問題
更新時(shí)間：2023年01月23日 12:35:14 作者：Mr_wuying
這篇文章主要介紹了vue $refs動(dòng)態(tài)拼接獲取值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue $refs動(dòng)態(tài)拼接獲取值
div是循環(huán) 所以img 的ref是動(dòng)態(tài)設(shè)置的 要獲取對(duì)應(yīng)點(diǎn)擊的
?<div class="unionLiveDiv" v-for="(item,index) in cityLivelist" :key='index' > ? ? ? ? <div class="unionLiveImg"> ? ? ? ? ? <input type="file" v-if='item.redact' @change='filePush1(cityLivelist,index,"img"+index)'/> ? ? ? ? ? <img :src='$store.state.imgSrc+item.cityLiveImg' v-if='item.cityLiveImg' :ref="'img'+index"/> ? ? ? ? ?? ? ? ? ? </div> ? ? ?</div>
//這里動(dòng)態(tài)傳值獲取不到
filePush1(list,index,img){
?? ?console.log(this.$refs.img)
?? ?//這樣寫會(huì)拿不到 img ?是個(gè)動(dòng)態(tài)值 ?這會(huì)直接已img為值去獲取 ?拿到的是undefined
}要遍歷循環(huán) 就可以獲取到值
filePush1(list,index,img){
?? ?let that=this
?? ?let refs=that.$refs
?? ?for(let key in refs){
? ? ? ? ? console.log(refs[img])
? ? ? ? ? //這里遍歷循環(huán)所有的 refs值 就可以拿到動(dòng)態(tài)拼接$refs所要的對(duì)應(yīng)值 這的img ?是動(dòng)態(tài)傳的值 ?
? ? ? ?}
}vue $refs不能動(dòng)態(tài)拼接問題
項(xiàng)目需求：動(dòng)態(tài)增減表單并驗(yàn)證
代碼如下：
<el-form
label-width="110px"
:inline="true"
v-for="(item, i) in formData"
:key="'add' + i"
:ref="'addForm' + i"
:rules="addRulse"
:model="formData[i]"
>
...
</el-form>
this.contentReqVoList.forEach((el, i) => {
console.log(this.$refs['addForm' + i])
this.$refs.addForm['addForm' + i].validate(v => {
...
})
})
錯(cuò)誤如下
原因：
- 因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候它們還不存在, $refs 也不是響應(yīng)式的，不能在模板中做數(shù)據(jù)綁定；
- 當(dāng) ref 和 v-for 一起使用的時(shí)候，你得到的引用將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。
修改代碼如下：
<el-form
label-width="110px"
:inline="true"
v-for="(item, i) in formData"
:key="'add' + i"
ref="addForm"
:rules="addRulse"
:model="formData[i]"
>
...
</el-form>
this.contentReqVoList.forEach((el, i) => {
this.$refs.addForm[i].validate(v => {
...
})
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動(dòng)格式化問題，對(duì)vscode 開發(fā)uniapp的相關(guān)知識(shí)感興趣的朋友一起看看吧2021-08-08
ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴}
這篇文章主要介紹了ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴},具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
antd vue 刷新保留當(dāng)前頁面路由,保留選中菜單,保留menu選中操作
這篇文章主要介紹了antd vue 刷新保留當(dāng)前頁面路由,保留選中菜單,保留menu選中操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue組件基礎(chǔ)操作，組件是vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用2023-01-01
我們所熟知的Vue.js也在如何提取公共代碼復(fù)用方面也一直在探索優(yōu)化，本文小編就來和各位聊聊Vue.js代碼復(fù)用的前世今生，希望對(duì)大家學(xué)習(xí)Vue有一定的幫助2023-05-05
Vue SPA單頁面應(yīng)用對(duì)SEO不友好，當(dāng)然也有相應(yīng)的解決方案，通過查找資料，大概有以下4種方法，本文就詳細(xì)的介紹一下2021-10-10
Vue Router是Vue提供的路由管理器,將組件與路由一一對(duì)應(yīng)起來,這種對(duì)應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用
這篇文章主要教大家如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10