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)
    }
  }
相关推荐
开开心心就好25 分钟前
高效Excel合并拆分软件
开发语言·javascript·c#·ocr·排序算法·excel·最小二乘法
難釋懷26 分钟前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax
特立独行的猫a31 分钟前
Nuxt.js 中的路由配置详解
开发语言·前端·javascript·路由·nuxt·nuxtjs
中微子32 分钟前
小白也能懂:JavaScript 原型链和隐藏类的奇妙世界
javascript
咸虾米33 分钟前
在uniCloud云对象中定义dbJQL的便捷方法
前端·javascript
梨子同志34 分钟前
JavaScript Proxy 和 Reflect
前端·javascript
海的诗篇_36 分钟前
移除元素-JavaScript【算法学习day.04】
javascript·学习·算法
汤圆炒橘子38 分钟前
状态策略模式的优势分析
前端
__Yx__39 分钟前
JavaScript核心概念输出——原型链
javascript
90后的晨仔1 小时前
解析鸿蒙 ArkTS 中的 Union 类型与 TypeAliases类型
前端·harmonyos