vue v-for获取子组件$ref总是拿到最后一个元素

news2024/11/29 1:55:37

页面循环列表,把子组件放在循环里面,此处获取this.$refs返回的应该是个数组,但是不知道为什么,一直返回的是循环的最后一个的子组件实列,官网上已经说明v-for返回的就是数组,所以一直很困惑

代码如下:大佬们可以帮忙看看有啥问题,打印出来一直最后一个的子组件实列(返回的是对象)

 <li class="list" 
     v-for="(item, index) in dataList"
     :key="item.id">
        {{ item.name }}
       <child :ref="child" :key="item.id"></child>
</li>
  methods: {
    getChild() {
       console.log(this.$ref.child)
    }
  }

暂时解决方案

 <li class="list" 
     v-for="(item, index) in dataList"
     :key="item.id">
        {{ item.name }}
       <child :ref="(el) => childRef(el, index)" :key="item.id"></child>
</li>
  methods: {
   childRef(el, index) {
      if (el) {
        this.childArr[index] = el;
      }
    },
    getChild() {
       console.log(this.childArr)
    }
  }

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

02 CSS基础入门

文章目录 一、CSS介绍1. 简介2. 相关网站3. HTML引入方式 二、选择器1. 标签选择器2. 类选择器3. ID选择器4. 群组选择器 四、样式1. 字体样式2. 文本样式3. 边框样式4. 表格样式 五、模型和布局1. 盒子模型2. 网页布局 一、CSS介绍 1. 简介 CSS主要用于控制网页的外观&#…

编程实战:类C语法的编译型脚本解释器(十)编译表达式

系列入口&#xff1a;编程实战&#xff1a;类C语法的编译型脚本解释器&#xff08;九&#xff09;编译语句 本文介绍表达式的编译。 一、代码概览 表达式的编译就是不断获取下一个标识符&#xff0c;直到遇到不属于表达式的东西。 完整代码如下&#xff1a; Expression* GetExp…

使用vue UI安装路由插件

1.使用vue创建项目 vue create vue-appvue ui 2.使用vue ui界面创建管理项目 终端页面输入&#xff1a;vue ui 创建项目 安装完成。可以直接在ui界面运行&#xff0c;也可以在编辑器中使用命令运行 安装路由&#xff0c;安装状态 选择插件 - 添加vue-router、添加vuex 安装…

面试常问的dubbo的spi机制到底是什么?(下)

前文回顾 前一篇文章主要是讲了什么是spi机制&#xff0c;spi机制在java、spring中的不同实现的分析&#xff0c;同时也剖析了一下dubbo spi机制的实现ExtensionLoader的实现中关于实现类加载以及实现类分类的源码。 一、实现类对象构造 看实现类对象构造过程之前&#xff0c;先…

8051的存储结构组成--程序存储空间、数据存储卡空间、特殊功能寄存器、位地址空间

AT89S51的存储结构 本文主要涉及8051单片机的存储结构&#xff0c;它的存储结构主要包括四部分&#xff0c;分别是出程序存储空间、数据存储卡空间、特殊功能寄存器、位地址空间四部分&#xff0c;下面将会展开描述。 文章目录 AT89S51的存储结构一、 程序存储空间二、 数据存储…

总结|哪些平台有大模型知识库的Web API服务

截止2023/12/6 笔者个人的调研&#xff0c;有三家有大模型知识库的web api服务&#xff1a; 平台类型文档数量文档上传并解析的结构api情况返回页码文心一言插件版多文档有问答api&#xff0c;文档上传是通过网页进行上传有&#xff0c;而且是具体的chunk id&#xff0c;需要设…

CentOS服务器网页版Rstudio-server及R包批量安装最佳实践

CentOS服务器安装网页版Rstudio-server及R包批量安装 以下为CentOS 7/8的Rstudio-server安装、配置和R包安装操作 1. 软件包安装 Centos 7安装 # 下载安装包&#xff0c;大小115.14 MB wget -c https://download2.rstudio.org/server/centos7/x86_64/rstudio-server-rhel-…

【工厂方法】设计模式项目实践

前言 以采集数据处理逻辑为例&#xff0c;数据采集分为不同种类如&#xff1a;MQTT、MODBUS、HTTP等&#xff0c;不同的采集数据有不同的解析处理逻辑。但总体解析处理步骤是固定的。可以使用工厂方法设计模式简化代码&#xff0c;让代码变得更加优雅。 代码实践 抽象类 总体…

每天五分钟计算机视觉:通过残差块搭建卷积残差神经网络Resnet

本文重点 随着深度神经网络的层数的增加,神经网络会变得越来越难以训练,之所以这样就是因为存在梯度消失和梯度爆炸问题。本节课程我们将学习跳跃连接方式,它可以从某一网络层获取激活a,然后迅速反馈给另外一层,甚至是神经网络的更深层,从而解决梯度消失的问题。 传统的…

SMART PLC求余指令

SMART PLC求余功能块在伪随机数发生器上的应用请查看下面文章链接&#xff1a; https://rxxw-control.blog.csdn.net/article/details/123793176https://rxxw-control.blog.csdn.net/article/details/123793176待续....

Qt之QGraphicsView —— 笔记1.2:将QGraphicsView放置主窗口上,绘制简单图元(附完整源码)

效果 相关类介绍 QGraphicsView类提供了一个小部件,用于显示QGraphicsScene的内容。QGraphicsView在可滚动视口中可视化。QGraphicsView将滚动其视口,以确保该点在视图中居中。 QGraphicsScene类 提供了一个用于管理大量二维图形项的场景。请注意,QGraphicsScene没有自己的视…

Nginx配置反向代理与负载均衡

Nginx配置反向代理与负载均衡 一、代理服务1.正向代理2.反向代理 二、实战场景-反向代理1.修改nginx配置 -> nginx.conf文件2.修改前端路径 三、实战场景-负载均衡1.热备2.轮询3.加权轮询4.ip_hash ​ Nginx (“engine x”) 是一个高性能的HTTP和反向代理服务器&#xff0c;…

ubuntu22 安装 cuda12.0

本文是先安装显卡驱动后进行的操作 查看显卡驱动支持CUDA的最新版本12.0 nvidia-smi 检查gcc版本 gcc -v 查看系统支持的gcc版本 https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html 选择对应的安装cuda命令 https://developer.nvidia.com/cuda-too…

居民最低生活保障人数数据,2020-2022年数据,shp矢量及表格数据均有!

居民最低生活保障&#xff0c;是国家对共同生活的家庭成员人均收入低于当地最低生活保障标准&#xff0c;且符合当地最低生活保障家庭财产状况规定的家庭&#xff0c;给予最低生活保障。 基本信息. 数据名称: 居民最低生活保障人数数据 数据格式: shpexcel 数据几何类型: 面…

C练习题13

单项选择题(本大题共20小题,每小题2分,共40分。在每小题给出的四个备选项中,选出一个正确的答案,并将所选项前的字母填写在答题纸的相应位置上。) 1.结构化程序由三种基本结构组成、三种基本结构组成的算法是() A.可以完成任何复杂的任务 B. 只能完成部分复杂的任务 C. 只能完…

Fabric:链码的部署及执行

Hyperledger Fabric:V2.5.4 写在最前 使用Fabric搭建自定义网络参考&#xff1a;https://blog.csdn.net/yeshang_lady/article/details/134113296 使用Fabric创建应用通道参考&#xff1a;https://blog.csdn.net/yeshang_lady/article/details/134668458 接下来将介绍如何在自…

配置BFD多跳检测示例

BFD简介 定义 双向转发检测BFD&#xff08;Bidirectional Forwarding Detection&#xff09;是一种全网统一的检测机制&#xff0c;用于快速检测、监控网络中链路或者IP路由的转发连通状况。 目的 为了减小设备故障对业务的影响&#xff0c;提高网络的可靠性&#xff0c;网…

CSS属性 display和visibility的区别

在CSS中&#xff0c;有两种让元素隐藏的方式&#xff0c;分别是display和visibility&#xff0c;他们有什么区别呢&#xff1f; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport"…

数据结构 | 查漏补缺之ASL、线索二叉树、哈夫曼树、大根堆、邻接表邻接矩阵

目录 ASL 情形之一&#xff1a;二分查找 线索二叉树 参考博文 哈夫曼树 参考博文 大根堆 参考博文 邻接表&邻接矩阵 参考博文1 参考博文2 ASL 参考博文 关于ASL(平均查找长度)的简单总结_平均查找长度asl-CSDN博客 情形之一&#xff1a;二分查找 线索二叉树 …