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)
    }
  }
相关推荐
__zRainy__36 分钟前
React开始:直接在网站中使用React.js
前端·react.js·前端框架
用户059540174461 小时前
大模型长记忆评测踩坑实录:2000条错位记忆,让我排查了整整3小时
前端·css
码林鼠1 小时前
webpack的基本配置
前端·webpack·node.js
用户938515635072 小时前
React Router 进阶:路由守卫、登录鉴权与状态传递
前端·javascript·全栈
kyriewen2 小时前
我重写了自己用了两年的防抖节流Hook——发现里面藏着3个隐藏bug
前端·javascript·面试
阿祖zu2 小时前
芝士就是力量!开源私有化部署与 GitHub 双向同步的个人知识笔记 App
前端·后端·ios
漂流瓶jz2 小时前
Webpack开发环境:观察模式/webpack-dev-server/HMR热更新
前端·javascript·webpack
IT_陈寒2 小时前
SpringBoot自动配置失效?这个隐藏配置坑了我一整晚
前端·人工智能·后端
小爬的老粉丝3 小时前
Vue 3 文件预览生产排障:Worker/WASM 404、鉴权 Blob 与子路径
javascript·vue.js·wasm
凌涘3 小时前
前端路由(一):二十行代码实现 Hash 路由
前端