目录Vue $refs动态拼接获取值vue $refs不能动态拼接问题项目需求:动态增减表单并验证总结vue $refs动态拼接获取值 div是循环 所以img 的ref是动态设置的
div是循环 所以img 的ref是动态设置的 要获取对应点击的
<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>
//这里动态传值获取不到
filePush1(list,index,img){
console.log(this.$refs.img)
//这样写会拿不到 img 是个动态值 这会直接已img为值去获取 拿到的是undefined
}
要遍历循环 就可以获取到值
filePush1(list,index,img){
let that=this
let refs=that.$refs
for(let key in refs){
console.log(refs[img])
//这里遍历循环所有的 refs值 就可以拿到动态拼接$refs所要的对应值 这的img 是动态传的值
}
}
代码如下:
<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 => {
...
})
})
错误如下
原因:
修改代码如下:
<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 => {
...
})
})
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue$refs动态拼接获取值问题
本文链接: https://www.lsjlt.com/news/178323.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0