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

小秋菇娘2023-12-11 1:35

页面循环列表，把子组件放在循环里面，此处获取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)
    }
  }