当前位置: 首页 > 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…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...