vue循环标签ref的值重复问题,获取ref为undefined
ref值重复,如何获取对应标签或组件正常使用vue 的 ref属性时使用$refs获取返回的是一个对象,对象包含组件内部信息.(例如 method中方法,及data中数据)//gauge 组件内部定义了个方法fun;<gauge :dataSource="arr" ref="gauge"/>//组件this.$refs.gauge.fun();//通过$refs可以直接调用组件内部方法
·
ref值重复,如何获取对应标签或组件
- 正常使用vue 的 ref属性时
使用$refs获取返回的是一个对象,对象包含组件内部信息.(例如 method中方法,及data中数据)
//gauge 组件内部定义了个方法fun;
<gauge :dataSource="arr" ref="gauge"/>//组件
this.$refs.gauge.fun();//通过$refs可以直接调用组件内部方法
- 循环显示组件 ,导致ref ,重复,按照第一种方法调用会返回undefined,
<div v-for="(item,index) in arr" :key="index">//多次循环
<gauge :dataSource="item" ref="gauge"/>//方法1
//<gauge :dataSource="item" :ref="`gauge${index}`"/> //方法2,ref值不重复
</div>
this.$refs.gauge.fun();//此时会报错,显示fun不是个函数
console.log(this.$refs.gauge)//返回值为数组,length===arr.length
this.$refs.gauge[0].fun();//调用第一个组件的内的方法
// _this.$refs[`gauge${index}`][0].refreshDraw();//方法2
更多推荐
已为社区贡献2条内容
所有评论(0)