vue v-for 下的$ref 返回数组

最新推荐文章于 2022-12-21 20:04:00 发布
最新推荐文章于 2022-12-21 20:04:00 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： 前端开发 javascript IT 文章标签： vue javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyqgt960812/article/details/114160233
版权
前端开发 同时被 3 个专栏收录
21 篇文章 0 订阅
订阅专栏
javascript
13 篇文章 0 订阅
订阅专栏
IT
2 篇文章 0 订阅
订阅专栏

如果refs自身的dom，或父级的dom是经过v-for渲染出来的，vue框架就会把
ref.key在registerRef函数就被设置成数组

v-for父级dom渲染实现：
在这里插入图片描述
source中查看被转化为数组格式：
在这里插入图片描述
因此要获取对应元素从两个方面开始考虑：
1、使用vue的this.$nextTick方法解决获取不到元素的问题；

2、因为ref获取的元素变成了数组属性，因此要在多个refs中使用【0】取；
在这里插入图片描述
因此这也是在获取refs对应的名称之后通过[0]这种获取数组元素的方式来获取对应的准确值；

恩婧
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
vue中$ref取值，有时候是数组，有时候是对象？
lazy_tomato的博客
12-28 8174
START 番茄今天，在vue项目中，$ref取值操作发现，时而是对象时而是数组，以前没有注意到这个细节问题，今天又写了固定的ref名称，又写了for生成的ref名称。 发现vue中$ref取值，静态的ref读取到的是dom对象，而for循环生成得ref，读取到的dom对象是一个数组。 详细说明 $ref取值操作发现，时而是对象时而是数组，以前没有注意到这个细节问题。 demo代码 <template> <div> <h1 style="text-align
vue $refs返回数组
qq_38611789的博客
02-19 7119
vue $refs返回数组 如果refs自身的dom，或父级的dom是通过v-for渲染出来的，vue框架就会把refInFor设置成true，然后ref.key在registerRef函数就被设置成数组
Vue中refs取值时，有时候是实例对象，有时候是实例对象组成的数组。
团长的博客
01-16 2431
这是vue的特性,自动把v-for里面的ref展开成数组的形式，哪怕你的ref名字是唯一的！ 假设你的ref不是动态的,而是静态的 ， ref=“a”， 那么不管你执行多少次循环,最后ref只会有一个值, 所以vue为了处理这种情况会把v-for里ref 转为数组形式，为了能捕捉所有的ref值. ...
VUE3.0之v-for 中的 Ref 数组
m0_49989338的博客
12-02 1万+
v-for 中的 Ref 数组 在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。 在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)： 一 : 在vue 2中的获取方式 <p v-for="(item,index) in 5" :key="index"
v-for 与ref配合使用，this.$refs.key 返回的是组件数组
黄彪博客
12-01 4272
文章目录文章参考问题描述过程分析ref 使用简单说明ref 和 v-for 配合使用案例说明 文章参考 Vue 官网访问子组件实例或子元素 v-for中使用ref属性 问题描述 工作中的项目需要选择人员和机构，已经封装为组件，可以选择机构和根据机构找人 业务中需要动态添加多个个预约记录，一条预约记录中需要选择人员和相关机构，有的是多选，有的是单选 添加的时候组件没有数据，可以用户选择 编辑修改的时候，后台返回数据，组件要使用v-for循环，组件内部的值使用$refs去寻找，然后赋值给相关组件 过程分
使用vue中的v-for遍历二维数组的方法
01-19
如下所示： <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-if='indexs !== type'> <td>{{itemss}} </template>
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
v-for 与ref 返回的是数组
weixin_43957384的博客
05-25 644
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 const projectDetailList = this.$refs[`projectDetailList${id}`] as ProjectListDetail | undefined; 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点. 【只要上级有v-for就会得到数组】 const proje
Vue学习日记--柒
weixin_41481695的博客
05-19 152
ref ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
Vue中ref和$refs的介绍与使用
chenzimin_blog
04-25 3376
之前没怎么注意 ref 的使用。后来一次结合 for 循环使用。才发现 ref 的使用细节满满。于是就总结了一下。 ref作用 用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。 1、如果给普通的dom元素使用，引用指向的是dom元素。 2、如果是给子组件使用，引用指向的是子组件的实例。 注意： 1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。 2、微信小程序中给dom元素使用ref无效。得到的是 空对象
Vue中数组常用操作函数/迭代器使用总结 -- 数组亦可称为集合
Zhaof_Notes
12-21 2111
Vue中数组常用操作函数/迭代器使用总结 -- 数组亦可称为集合
VUE-this.$refs返回值的数据格式场景
qq_15509267的博客
03-07 3953
一、使用场景 父组件为了调用子组件中的方法；使用ref占位实现； 二、问题描述 在父组件中引用select-multiple、message两个组件；并且打印$ref ... //DOM &lt;div class="shopInfoTeam" v-for="item in shopBaseItem"&gt; &lt;label v-text="item.label" class=...
VUE 前端 框架基础（全栈工程师基础）
fengj20015的博客
09-23 339
数组 .filter() filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。过滤满足条件的内容 .map() map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 .forRach() forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意:forEach() 对于空数组是不会执行回调函数的。如果数组可能为空，又必须要执行回调函数时，.
vue中ref的使用（this.$refs获取为空）
热门推荐
如果不是现在，那是什么时候呢
04-06 4万+
//6.14更新 但是有个办法，我们可以使用 this.$nextTick(() => { // todo }) setTimeout(() => { // todo }, 0) 来得到数据 ref 本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的 $refs不是响应式的，只在组件渲染完成后才填充 用于元素或子组件注册...
VUE中$refs的基本用法
weixin_43617604的博客
08-27 3230
ref 有三种用法： 1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素 2、ref 加在子组件上，用this. $refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 应注意的坑： 1、如果通过v...
vuev-for绑定refs
最新发布
07-28
在Vue中，v-for指令可以用于循环渲染元素列表。如果你想要在v-for循环中绑定ref引用，可以通过使用动态ref名称来实现。 下面是一个示例，展示了如何在v-for循环中绑定refs： ```html <div v-for="(item, index...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值