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

总结

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

相关文章

  • 在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果

    在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果

    这篇文章主要介绍了在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

    vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

    keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,下面这篇文章主要给大家介绍了关于vue使用keep-alive进行组件缓存方法(组件不缓存问题解决)的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue3源码分析组件挂载创建虚拟节点

    Vue3源码分析组件挂载创建虚拟节点

    这篇文章主要为大家介绍了Vue3源码分析组件挂载创建虚拟节点,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue-cli-service的参数配置过程

    vue-cli-service的参数配置过程

    这篇文章主要介绍了vue-cli-service的参数配置过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 详解基于vue-cli配置移动端自适应

    详解基于vue-cli配置移动端自适应

    本篇文章主要介绍了详解基于vue-cli配置移动端自适应,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue2.0 获取从http接口中获取数据,组件开发,路由配置方式

    vue2.0 获取从http接口中获取数据,组件开发,路由配置方式

    今天小编就为大家分享一篇vue2.0 获取从http接口中获取数据,组件开发,路由配置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 浅谈webpack编译vue项目生成的代码探索

    浅谈webpack编译vue项目生成的代码探索

    本篇文章主要介绍了浅谈webpack编译vue项目生成的代码探索,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue父子组件通信的高级用法示例

    vue父子组件通信的高级用法示例

    这篇文章主要给大家介绍了关于vue父子组件通信的高级用法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

    基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

    本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程,包含发布到npm,构建自己的npm包,供下载安装使用的技巧,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • vue2 中二级路由高亮问题及配置方法

    vue2 中二级路由高亮问题及配置方法

    这篇文章主要介绍了vue2 中二级路由 高亮问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06

最新评论