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)
    }
  }
相关推荐
大学生小郑5 分钟前
VUE与React的生命周期对比
前端·vue.js·react.js
JerryXZR11 分钟前
Angular基础保姆级教程 - 1
前端·javascript·angular.js
金灰11 分钟前
14-Django项目--文件上传-Excel
服务器·前端·javascript
inksci17 分钟前
用 Echarts 画折线图
前端·javascript·html·echarts
JUANのWEB23 分钟前
【WEB前端】---HTML---结构---笔记
前端·笔记·html
夏花里的尘埃3 小时前
vue3实现echarts——小demo
前端·vue.js·echarts
努力学习的木子3 小时前
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
前端·小程序·uni-app
java小郭6 小时前
html的浮动作用详解
前端·html
水星记_6 小时前
echarts-wordcloud:打造个性化词云库
前端·vue
强迫老板HelloWord7 小时前
前端JS特效第22波:jQuery滑动手风琴内容切换特效
前端·javascript·jquery