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裁剪组件(裁剪及预览效果),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)
keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,下面这篇文章主要给大家介绍了关于vue使用keep-alive进行组件缓存方法(组件不缓存问题解决)的相关资料,需要的朋友可以参考下2022-09-09vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
今天小编就为大家分享一篇vue2.0 获取从http接口中获取数据,组件开发,路由配置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程,包含发布到npm,构建自己的npm包,供下载安装使用的技巧,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
最新评论