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

2023-01-24 08:37:43 来源：易采站长站作者：

目录vue$refs动态拼接获取值vue$refs不能动态拼接问题项目需求：动态增减表单并验证总结vue$refs动态拼接获取值div是循环所以img的ref是动态设置的要获取对应点击的...

vue $rjavascriptefs动态拼接获取值

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 $rhttp://www.cppcns.comefs不能动态拼接问题

项目需求：动态增减表单并验证

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 => {
...
   })
  })

错误如下

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

原因：

因为 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 => {
...
   })
  })

总结

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

如有侵权，请发邮件到 [email protected]

业界

电商

创业

访谈

手机

移动

报告

运营

建站

互联网+

系统

教程

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

目录

vue $rjavascriptefs动态拼接获取值

vue $rhttp://www.cppcns.comefs不能动态拼接问题

项目需求：动态增减表单并验证

总结

最新图文推荐

相关文章

最新专栏文章

nodejs处理http请求实例详解之get和post

vue中this.$refs有值,但无法获取ref的值问题及解决

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

大家感兴趣的内容

网友热评的文章