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

目录 vue $refs动态拼接获取值 vue $refs不能动态拼接问题 项目需求：动态增减表单并验证 总结

vue $refs动态拼接获取值

div是循环 所以 img 的ref是动态设置的 要获取对应点击的

 <div class="unionLiveDiv" v-for="( IT em,index) in cityLivelist" :key='index' >
        <div class="unionLiv ei mg">
          <input ty PE ="file"  v-if ='item. red act' @change='filePus h1 (cityLivelist,index,"img"+index)'/>
          <img :src='$ Store . stat e.imgSrc+item.cityLiveImg' v -i f='item.cityLiveImg' :ref="'img'+index"/>
          
        </div>
     </div>

//这里动态传值获取不到

filePush1(list,index,img){
    console. LOG (this.$refs.img)
    //这样写会拿不到 img  是个动态值  这会直接已img为值去获取  拿到的是un define d
}

要遍历循环 就可以获取到值

filePush1(list,index,img){
    let t hat =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="'ad DF orm' + i"
      :rules="addRulse"
      :model="formData[i]"
    >
	 .. .
    </el-form>

 this.contentReqVoList.for each ((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)

总结

以上是 为你收集整理的 vue $refs动态拼接获取值问题 全部内容，希望文章能够帮你解决 vue $refs动态拼接获取值问题 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue $refs动态拼接获取值问题的详细内容...