vue $refs动态拼接获取值问题

目录

• vue $refs动态拼接获取值
• 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 =>
 {
	...   }
)  }
    )

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue动态绑定ref(使用变量)以及获取方式
• vue 父组件通过$refs获取子组件的值和方法详解
• vue使用refs获取嵌套组件中的值过程
• 关于vue中ref的使用(this.$refs获取为undefined)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！