当前位置: 首页 > news >正文

vue3项目中如何动态循环设置ref并获取使用

前言:vue2可通过ref来获取当前的dom,但是vue3有个问题,就是必须定义ref的变量名,才能使用;倘若有多个ref,一个个去定义未免过于繁琐,还有一种情况就是dom是使用v-for循环出来的,那么ref也就不确定了,无法提前定义。

解决方法1:

  • 这是使用v-for循环出来的dom,ref通过index下标来命名,
<divv-for="(item, index) in dataList":key="item.id"
><mine-info:ref="el => getMineRef(el, index)":title="item.title":data="item.data"></mine-info>
</div>
  • 此时mineRefList里面放的就是所有ref
const mineRefList = ref<HTMLElement[]>([]);
const getMineRef = (el:any, index:number) => {if (el) {mineRefList .value[index] = el; }
};
  • 使用forEach循环去取就行,这里的 item 就是通过ref拿到的 dom元素。可以操作上面定义的变量或方法
mineRefList.value?.forEach((item: any) => {console.log(item)
});

解决方法2: 

         注意:与上面略相似,但是用push可能会造成ref还没渲染完得到null的情况,所以最好还是上面那样写

<divv-for="(item, index) in dataList":key="item.id"
><mine-info:ref="getMineRef":title="item.title":data="item.data"></mine-info>
</div>let mineRefList = ref<HTMLElement[]>([]);
const getMineRef = (el:any) => {if (el) {mineRefList.value.push(el);}
};mineRefList.value?.forEach((item: any) => {console.log(item)
});

相关文章:

vue3项目中如何动态循环设置ref并获取使用

前言&#xff1a;vue2可通过ref来获取当前的dom&#xff0c;但是vue3有个问题&#xff0c;就是必须定义ref的变量名&#xff0c;才能使用&#xff1b;倘若有多个ref&#xff0c;一个个去定义未免过于繁琐&#xff0c;还有一种情况就是dom是使用v-for循环出来的&#xff0c;那么…...

stm32之SPI通信协议

文章目录 前言一、SPI通信协议1.1 SPI简介1.2 SPI通信特点1.3 SPI与I2C对比 二、SPI硬件电路三、SPI通信原理四、SPI时序单元4.1 起始和终止条件4.2 交换一个字节(模式1)4.3 交换一个字节(模式0)4.4 交换一个字节(模式2和3) 五、SPI时序5.1 发送指令5.2 指定地址写5.3 指定地址…...

Unity 摄像机(Camera)详解

文章目录 0.前言1.相机属性介绍2.Unity 中多个相机画面堆叠显示2.1 3D 摄像机2.2 UI 摄像机2.3 摄像机的Culling Mask设置 0.前言 本文介绍的是使用Unity默认的内置渲染管线下的Camera组件&#xff0c;使用URP或HDRP则不同。 1.相机属性介绍 Clear Flags&#xff1a; 清除标记…...

数学基础 -- 线性代数之LU分解

LU分解 LU分解&#xff08;LU Decomposition&#xff09;是线性代数中非常重要的一种矩阵分解方法。它将一个方阵分解为一个下三角矩阵&#xff08;L矩阵&#xff09;和一个上三角矩阵&#xff08;U矩阵&#xff09;的乘积。在数值线性代数中&#xff0c;LU分解广泛用于求解线…...

高职人工智能训练师边缘计算实训室解决方案

一、引言 随着物联网&#xff08;IoT&#xff09;、大数据、人工智能&#xff08;AI&#xff09;等技术的飞速发展&#xff0c;计算需求日益复杂和多样化。传统的云计算模式虽在一定程度上满足了这些需求&#xff0c;但在处理海量数据、保障实时性与安全性、提升计算效率等方面…...

【Java】SpringCloud中使用set方法报错空指针

前言&#xff1a;今天在交流群中看见了一个空指针报错&#xff0c;想着哪里为空点过去看看为什么赋不上值就行&#xff0c;没想到啪啪打脸了&#xff0c;今天总结一下。 以下是他的RedisTempate注入和方法 可以看到&#xff0c;89行报错空指针。先分析一下&#xff0c; ①赋值…...

芯片杂谈 -- 常聊的内核包含哪些模块

目录 1. R52内核速览 2. 处理器模块详解 3.内核的功能安全测什么&#xff1f; 4.小结 最开始接触到汽车MCU大都来自NXP、Infineon、Renesas&#xff0c;例如MPC5748、TC275、RH850 P1X等等&#xff1b; 而各大OEM、供应商等等发布的JD通常都会要求熟悉AURIX、PowerPC、G3K…...

运维问题0002:SAP多模块问题-SAP系统程序在执行时,跳出“加急快件”窗口,提示:快件文档“更新已终止”从作者***收到

1、问题描述 近期收到2起业务报障&#xff0c;均反馈在SAP执行程序时&#xff0c;弹出“加急快件”窗口&#xff0c;导致操作的业务实际没有更新完成。 1&#xff09;业务场景一&#xff1a;设备管理部门在操作事务代码&#xff1a;AS02进行资产信息变更时&#xff0c;保存正常…...

深度解析RAG:你必须要了解的RAG优化方法

RAG&#xff08;Retrieval-Augmented Generation&#xff09;是一种结合检索和生成能力的技术框架&#xff0c;旨在通过从外部知识库中检索相关信息来增强生成模型的输出。其基本思想是利用大型语言模型&#xff08;LLM&#xff09;的生成能力&#xff0c;同时通过检索机制获取…...

深度学习驱动下的字符识别:挑战与创新

一、引言 1.1 研究背景 深度学习在字符识别领域具有至关重要的地位。随着信息技术的飞速发展&#xff0c;对字符识别的准确性和效率要求越来越高。字符识别作为计算机视觉领域的一个重要研究方向&#xff0c;其主要目的是将各种形式的字符转换成计算机可识别的文本信息。近年…...

使用 JAXB 将内嵌的JAVA对象转换为 xml文件

使用 JAXB 将内嵌的JAVA对象转换为 xml文件 1. 需求2. 实现&#xff08;1&#xff09;FileDesc类&#xff08;2&#xff09;MetaFileXml类&#xff08;3&#xff09;生成对应的xml文件 1. 需求 获取一个目录下所有文件的元数据信息&#xff08;文件名、大小、后缀等&#xff0…...

若依项目后台启动报错: [网关异常处理]、503

拉取代码启动项目&#xff0c;网关控制台报错&#xff1a; 21:31:59.981 [boundedElastic-7] WARN o.s.c.l.c.RoundRobinLoadBalancer - [getInstanceResponse,98] - No servers available for service: ruoyi-system 21:31:59.981 [boundedElastic-7] ERROR c.r.g.h.Gateway…...

【C++ Qt day10】

2、 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&am…...

GO HTTP库使用

Go的 net/http 包是一个强大且易于使用的库&#xff0c;用于构建HTTP服务器和客户端。通过它&#xff0c;你可以轻松实现HTTP请求的处理、路由、静态文件服务等功能。下面重点以及一个简单的Demo示例。 文章目录 1. **基础HTTP服务器**2. **处理请求与响应**3. **路由与处理器*…...

数据结构 - 顺序表

0.线性表 1.定义 线性表就是零个或多个相同数据元素的有限序列。 2.线性表的存储结构 ①.顺序结构 ②.链式结构 3.线性表的表示方法 例如&#xff1a; 一.线性表的基本运算 二.线性表的复杂运算 1.线性表的合并运算 2.线性表的去重运算 三.顺序表 1.定义 顺序表&#xff0c;就…...

企业如何组建安全稳定的跨国通信网络?

组建一个安全稳定的跨国通信网络对于现代企业来说至关重要&#xff0c;尤其是当企业在全球范围内运营时。以下是一些关键步骤和考虑因素&#xff1a; 需求分析&#xff1a; 确定企业的具体通信需求&#xff0c;包括带宽要求、延迟敏感度、数据类型&#xff08;如语音、视频、文…...

OCR在线识别网站现已上线!

注意,本文只提供学习的思路,严禁违反法律以及破坏信息系统等行为,本文只提供思路 如有侵犯,请联系作者下架 由作者亲自开发的ocr识别网站哈哈,暂时汇聚了三十多种验证码模型以及算法,欢迎各路朋友去尝试,网站地址如下 http://gbj5w3.natappfree.cc/ocr 验证码类型包括但…...

排名再升2位 中国平安位列BrandZ最具价值中国品牌第9位

9月10日&#xff0c;凯度华通明略发布“2024年BrandZ最具价值中国品牌”榜单&#xff0c;中国平安位列榜单第9位&#xff0c;较2023年榜单排名上升2位&#xff0c;品牌价值韧性增长至205.14亿美元&#xff0c;十度蝉联中国保险行业品牌价值第一位。榜单特别提到&#xff0c;中国…...

k8s集群部署:环境准备

本教程基于centos9 arm架构展开。 1. 设置主机名 为每个节点设置主机别名&#xff0c;以便于集群中的角色识别&#xff1a; # 设置主节点的主机名为 kmaster sudo hostnamectl set-hostname kmaster --static# 设置工作节点1的主机名为 kworker1 sudo hostnamectl set-hostn…...

<C++> set、map模拟实现

目录 一、适配器红黑树 二、红黑树再设计 1. 重新设计 RBTree 的模板参数 2. 仿函数模板参数 3. 正向迭代器 构造 operator*() operator->() operator!() operator() operator--() 正向迭代器代码 4. 反向迭代器 构造 operator* operator-> operator operator-- operat…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...