Vue3 v-for绑定的dom获取ref为undefined

这是代码结构

<div class="playerInfo" 
    v-for="(item, index) in data.playersInfo" 
    :key="index" 
    :ref="el => {if(el)playersRef[index] = el}"
    :style="`left:${item.position[0]};top:${item.position[1]}`"
    @click="playerPassHighLight(index)"
>
    <div class="player-name" style="margin-bottom: 5px;">
        {{ item.nameCn }}
    </div>
    <div class="player-avatar">
       <img :src="item.img" alt="" style="width: 60px; height:60px; border-radius: 30px;" />
    </div>
</div> 

然后在console.log(playersRef.value, playersRef.value[0])的时候出现:

playersRef.value有数据,但是playersRef.value[0]为undefined

解决:

参考关于VUE中v-for循环的dom使用ref获取不到问题-CSDN博客

用nextTick再调用一次

onMounted(() => {
   getPassInfo()
   nextTick(()=> getPassInfo())
})

 完美解决~

 P.S. 如果把方法放到updated里面会一直请求数据,就没用updated

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/477962.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【ZooKeeper】2、安装

本文基于 Apache ZooKeeper Release 3.7.0 版本书写 作于 2022年3月6日 14:22:11 转载请声明 下载zookeeper安装包 wget https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3.7.0/apache-zookeeper-3.7.0-bin.tar.gz解压 tar -zxvf apache-zookeeper-3.7.0-b…

Transformer的前世今生 day06(Self-Attention和RNN、LSTM的区别

Self-Attention和RNN、LSTM的区别 RNN的缺点&#xff1a;无法做长序列&#xff0c;当输入很长时&#xff0c;最后面的输出很难参考前面的输入&#xff0c;即长序列会缺失上文信息&#xff0c;如下&#xff1a; 可能一段话超过50个字&#xff0c;输出效果就会很差了 LSTM通过忘…

什么是行业垂直类媒体?有哪些?怎么邀约

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体胡老师。 行业垂直类媒体是聚焦于特定行业或领域的媒体平台。 行业垂直类媒体不同于主流媒体&#xff0c;它们专注于提供与某个特定领域相关的深入内容和服务&#xff0c;例如商业新闻、旅游、数字…

什么快递可以寄摩托车?看你要啥样的了

一辆49cc的二冲程摩托车仅需561元。 购买125的组装车不会超过1元&#xff0c;购买250品牌发动机的组装车不会超过4000元。 购买一辆名牌摩托车大约需要4000到10000元。 花一万到两百万多就能买到一辆像样、动力强劲、能玩的炫酷摩托车。 哈哈&#xff0c;就看你想要什么了&…

力扣---随机链表的复制

给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节点的 n…

关于5.x版本的Neo4j与py2neo的访问技巧

先说结果。 Neo4j是可以使用py2neo来操作的。而且网上搜到的教程和方法里&#xff0c;首推的http连接方法可能并不是最好的&#xff0c;应该用 bolt 方法可能更好。 对于大多数使用 py2neo 与 Neo4j 数据库进行交互的应用程序来说&#xff0c;建议使用 Bolt 协议&#xff08;即…

操作系统实践之路——五、初始化(2.Linux初始化)

文章目录 一、全局流程二、从BIOS到GRUB三、GRUB是如何启动的四、详解vmlinuz文件结构五、流程梳理-1六、内核初始化从_start开始七、流程梳理-2参考资料 前言 ​ 本章节将讨论一下Linux如何去做初始化。 一、全局流程 ​ 在机器加电后&#xff0c;BIOS 会进行自检&#xff…

Wi-Fi 7:下一代无线网络的革命性技术与特点解析

更多精彩内容在 随着无线通信的不断发展&#xff0c;Wi-Fi技术作为无线网络连接的重要组成部分&#xff0c;也在不断演进。Wi-Fi 7作为下一代无线网络标准&#xff0c;被认为将带来革命性的变化&#xff0c;提供更快速、更可靠的网络连接。本文将深入解析Wi-Fi 7的技术和特点&a…

广交会参展,一起来看看展会二维如何制作吧

展会&#xff0c;一直都是企业开发客户、寻找合作伙伴、拓展渠道、展示产品和技术、提升品牌知名度、行业交流的重要宣传活动。 据相关资料显示&#xff0c;2024年新能源行业和电子电力行业依旧是展会青睐的重点行业&#xff0c;分别占到统计数据的35%和38%。从举办展会的国家…

GPT-4 VS Claude3、Gemini、Sora:五大模型的技术特点与用户体验

【最新增加Claude3、Gemini、Sora、GPTs讲解及AI领域中的集中大模型的最新技术】 2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚…

如何在个人Windows电脑搭建Cloudreve云盘并实现无公网IP远程访问

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…

九、C#桶排序算法

简介 桶排序是一种线性时间复杂度的排序算法&#xff0c;它将待排序的数据分到有限数量的桶中&#xff0c;每个桶再进行单独排序&#xff0c;最后将所有桶中的数据按顺序依次取出&#xff0c;即可得到排序结果。 实现原理 首先根据待排序数据&#xff0c;确定需要的桶的数量。…

27 OpenCV 凸包

文章目录 概念Graham扫描算法convexHull 凸包函数示例 概念 什么是凸包(Convex Hull)&#xff0c;在一个多变形边缘或者内部任意两个点的连线都包含在多边形边界或者内部。 正式定义&#xff1a; 包含点集合S中所有点的最小凸多边形称为凸包 Graham扫描算法 首先选择Y方向最低…

Spring MVC(三)- 处理器与注解

Spring MVC 用Controller及RestController 注解来标志&#xff08;自动扫描并注册成bean&#xff09;该类是一个控制器容器类,在该类下&#xff0c;使用RequestMapping及其扩展注解来定义处理器。使用注解&#xff0c;可以定义请求的映射、请求的输入、异常处理等。 1 映射请求…

MAC 帧(数据链路层)

目录 一、MAC帧的格式 二、无效的帧 三、帧间最小间隔 四、帧的发送与接收 五、小结 一、MAC帧的格式 • 常用的以太网 MAC 帧格式有两种标准 &#xff1a; DIX Ethernet V2 标准&#xff1b; IEEE 的 802.3 标准。 • 最常用的 MAC 帧是以太网 V2 的格式。 二、…

python网络爬虫实战教学——requests的使用(1)

文章目录 专栏导读1、前言2、get请求3、抓取网页4、抓取二进制数据5、请求头 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对…

git push出错: src refspec dev/xxx does not match any

使用如下命令gitp push出错: git push origin 远端分支名 git push origin dev/xxxx error: src refspec dev/xxxx does not match any error: failed to push some refs to https://git.woa.com/..... 解决方案 1: git push origin 本地分支名:远端分支名 解决方案2&#…

SV-6005TP 双键网络对讲求助模块 sip对讲终端音频模块 支持POE供电 带功放输出

SV-6005TP 双键网络对讲求助模块 sip对讲终端音频模块 支持POE供电 带功放输出 一、描述 SV-6005TP模块是我司的一款壁挂式SIP双按键求助对讲模块&#xff0c;具有10/100M以太网接口&#xff0c;其接收网络的音频数据&#xff0c;实时解码播放&#xff0c;还配置了麦克风输入…

python-学习-Linux系统使用

设置变量并输出 [rootldpbzhaonan py]$ cat var01.py str1hello str2worldprintf "${str1} ${str2} \n" printf ${str1} ${str2} \n\n就是代表换行&#xff0c;使用printf输出的话&#xff0c;没有自动换行。 不使用换行如下图显示 [rootldpbzhaonan py]$ cat var0…

【RPG Maker MV 仿新仙剑 战斗场景UI (七)】

RPG Maker MV 仿新仙剑 战斗场景UI 七 法术物品窗口代码仿新仙剑效果 法术物品窗口 继续水点内容 现在发出及确认物品窗口显示及操作。 代码 function Window_BattleItem() {this.initialize.apply(this, arguments); }Window_BattleItem.prototype Object.create(Pal_Wind…