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

页面循环列表,把子组件放在循环里面,此处获取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)
    }
  }
相关推荐
小雨下雨的雨3 小时前
井字棋AI机器人实现详解 - Minimax算法实战-鸿蒙PC Electron框架完成
前端·人工智能·算法·华为·electron·鸿蒙
ZC跨境爬虫7 小时前
跟着 MDN 学JavaScript day_7:数学运算与逻辑判断实战测试
开发语言·前端·javascript·学习·ecmascript
fangdengfu1237 小时前
ES分析系统各个服务日志占用量
java·前端·elasticsearch
凌云拓界7 小时前
文件管理:让AI安全操作你的电脑 ——CogitoAgent开发实战(三)
javascript·人工智能·架构·开源·node.js
凌云拓界8 小时前
联网能力:让AI看见更广阔的世界 ——CogitoAgent开发实战(四)
javascript·人工智能·架构·node.js·创业创新
JustHappy9 小时前
古法编程秘籍(六):程序到底是怎么跑起来的?从 IO 到中断,一次讲明白
前端·后端·全栈
HYCS9 小时前
用pixi.js实现fabric.js(六):从线性代数的角度理解编辑器交互
前端·javascript·canvas
卷帘依旧9 小时前
useImperativeHandle的作用
前端
卷帘依旧10 小时前
Hooks在Fiber上的存储原理
前端