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)
    }
  }
相关推荐
掘金安东尼6 小时前
让 JavaScript 更容易「善后」的新能力
前端·javascript·面试
掘金安东尼6 小时前
用 HTMX 为 React Data Grid 加速实时更新
前端·javascript·面试
灵感__idea8 小时前
Hello 算法:众里寻她千“百度”
前端·javascript·算法
yinuo8 小时前
轻松接入大语言模型API -04
前端
袋鼠云数栈UED团队9 小时前
基于 Lexical 实现变量输入编辑器
前端·javascript·架构
cipher9 小时前
ERC-4626 通胀攻击:DeFi 金库的"捐款陷阱"
前端·后端·安全
UrbanJazzerati9 小时前
非常友好的Vue 3 生命周期详解
前端·面试
AAA阿giao9 小时前
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈
前端·css·react.js
亦妤9 小时前
JS执行机制、作用域及作用域链
javascript
兆子龙10 小时前
像 React Hook 一样「自动触发」:用 Git Hook 拦住忘删的测试代码与其它翻车现场
前端·架构