我要评论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 => {
...
})
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论