vue $refs动态拼接获取值问题
作者：Mr_wuying
这篇文章主要介绍了vue $refs动态拼接获取值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue $refs动态拼接获取值
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 是动态传的值
}
}vue $refs不能动态拼接问题
项目需求：动态增减表单并验证
代码如下：
<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 本身是作为渲染结果被创建的，在初始渲染的时候它们还不存在, $refs 也不是响应式的，不能在模板中做数据绑定；
- 当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。
修改代码如下：
<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 => {
...
})
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。