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

 更新时间:2023年01月23日 12:35:14   作者: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 => {
	...
   })
  })

总结

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

相关文章

  • 使用vscode 开发uniapp的方法

    使用vscode 开发uniapp的方法

    本文给大家分享我使用vscode开发的一些配置。其中包括uniapp组件语法提示,uniapp代码提示,代码自动格式化问题,对vscode 开发uniapp的相关知识感兴趣的朋友一起看看吧
    2021-08-08
  • ant design vue pro 支持多页签模式问题

    ant design vue pro 支持多页签模式问题

    这篇文章主要介绍了ant design vue pro 支持多页签模式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue制作toast组件npm包示例代码

    vue制作toast组件npm包示例代码

    这篇文章主要介绍了vue制作一个toast组件npm包,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

    antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

    这篇文章主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue引入部分element.ui组件的一些小坑记录

    Vue引入部分element.ui组件的一些小坑记录

    这篇文章主要介绍了Vue引入部分element.ui组件的一些小坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue组件基础操作介绍

    Vue组件基础操作介绍

    这篇文章主要介绍了Vue组件基础操作,组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用
    2023-01-01
  • 4种方案带你探索Vue代码复用的前世今生

    4种方案带你探索Vue代码复用的前世今生

    我们所熟知的Vue.js也在如何提取公共代码复用方面也一直在探索优化,本文小编就来和各位聊聊Vue.js代码复用的前世今生,希望对大家学习Vue有一定的帮助
    2023-05-05
  • 浅谈Vue单页面做SEO的四种方案

    浅谈Vue单页面做SEO的四种方案

    Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法,本文就详细的介绍一下
    2021-10-10
  • Vue中vue-router路由使用示例详解

    Vue中vue-router路由使用示例详解

    Vue Router是Vue提供的路由管理器,将组件与路由一一对应起来,这种对应关系就路由,这篇文章主要介绍了Vue中vue-router路由使用,需要的朋友可以参考下
    2024-06-06
  • 如何使用Vuex+Vue.js构建单页应用

    如何使用Vuex+Vue.js构建单页应用

    这篇文章主要教大家如何使用Vuex+Vue.js构建单页应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论