引用绑定的访问方法

时间:2019-07-12 14:53:28

标签: vue.js

我正在尝试从组件访问方法。该组件具有附加的动态引用:

<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 not a function"

我在另一种方法中做了同样的事情(但不是针对动态生成的引用)。有人对我为什么出现此错误有任何建议吗?

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

enter image description here

1 个答案:

答案 0 :(得分:0)

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

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

编辑

@ 0x5453通过链接指出

  

在带有v-for的元素/组件上使用时,注册参考   将是一个包含DOM节点或组件实例的数组。