vue $refs動(dòng)態(tài)拼接獲取值問(wèn)題
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)拼接問(wèn)題
項(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)文章
淺談Vue Element中Select下拉框選取值的問(wèn)題
下面小編就為大家分享一篇淺談Vue Element中Select下拉框選取值的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過(guò)大、很慢等情況,為了解決這一問(wèn)題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-11-11
Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法
今天小編就為大家分享一篇Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
基于vue.js組件實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了基于vue.js組件實(shí)現(xiàn)分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解
這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能,結(jié)合實(shí)例形式詳細(xì)分析了Vue + Node.js + MongoDB基于圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11

