vue.js - ref vue绑定(bind)的访问方法

Question

我正在尝试从一个组件访问一个方法。该组件附加了一个动态引用:

<team-card
              :ref="`team-card-details-${team.id}`"
              class="mt-5"
              v-for="team in teams"
              v-on:delete-team="DELETE_TEAM"
              :show-delete-btn="true"
              :key="team.name"
              :team="team"></team-card>

团队卡片组件

methods: {
            REFRESH_CARD(){
                this.$refs[`team-card-details-component-${this.team.id}`].refreshcard()
      },
            REMOVE_REFRESH_ANIMATION(){
                this.$refs[`team-card-details-component-${this.team.id}`].removeRefreshAnimation()
      }
    }

每当我点击卡片中的一个按钮时，我都想访问 REFRESH_CARD 函数，我正在使用这一行:

this.$refs['team-card-details-' + team.id].REFRESH_CARD()

我收到一个错误 [Vue warn]: Error in v-on handler: "TypeError: this.$refs[("team-card-details-"+ team.id)].REFRESH_CARD is不是函数”

我在另一种方法中做了同样的事情(但不是动态生成的引用)。有没有人对我收到此错误有任何建议？

如果我执行一个简单的 console.log，我可以看到存在的函数和被正确引用的组件:

Answer 1

我不知道为什么 refs 返回了一个数组，我必须访问数组的第一个位置(我不太确定为什么，但如果我发现会更新答案为什么)。所以最终的代码是这样的:

this.$refs['team-card-details-' + team.id][0].REFRESH_CARD()

编辑

正如@0x5453 通过链接指出的那样

When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances.