vue $refs動態(tài)拼接獲取值問題
更新時間:2023年01月23日 12:35:14 作者:Mr_wuying
這篇文章主要介紹了vue $refs動態(tài)拼接獲取值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue $refs動態(tài)拼接獲取值
div是循環(huán) 所以img 的ref是動態(tài)設(shè)置的 要獲取對應(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>
//這里動態(tài)傳值獲取不到 filePush1(list,index,img){ ?? ?console.log(this.$refs.img) ?? ?//這樣寫會拿不到 img ?是個動態(tài)值 ?這會直接已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值 就可以拿到動態(tài)拼接$refs所要的對應(yīng)值 這的img ?是動態(tài)傳的值 ? ? ? ? ?} }
vue $refs不能動態(tài)拼接問題
項目需求:動態(tài)增減表單并驗證
代碼如下:
<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 => { ... }) })
錯誤如下
原因:
- 因為 ref 本身是作為渲染結(jié)果被創(chuàng)建的,在初始渲染的時候它們還不存在, $refs 也不是響應(yīng)式的,不能在模板中做數(shù)據(jù)綁定;
- 當(dāng) ref 和 v-for 一起使用的時候,你得到的引用將會是一個包含了對應(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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例
前端上傳大文件、視頻的時候會出現(xiàn)超時、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例,感興趣的可以了解一下2023-11-11Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法
今天小編就為大家分享一篇Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue + Node.js + MongoDB圖片上傳組件實現(xiàn)圖片預(yù)覽和刪除功能詳解
這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實現(xiàn)圖片預(yù)覽和刪除功能,結(jié)合實例形式詳細(xì)分析了Vue + Node.js + MongoDB基于圖片上傳組件實現(xiàn)圖片預(yù)覽和刪除功能相關(guān)操作技巧,需要的朋友可以參考下2020-04-04Vue技巧Element Table二次封裝實戰(zhàn)示例
這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11