Как я могу вызвать метод в компоненте из представления? (Vue.js 2)

Question

мой взгляд, как это:

<div class="row no-gutter"> 
    <div class="col-md-9 col-xs-12"> 
     <div class="wrap-tabs"> 
      <ul class="nav nav-tabs nav-cat"> 
       <li role="presentation" class="active"><a href="#" data-toggle="tab" @click="getPlayer(1)">England</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab" @click="getPlayer(2)">Spain</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab" @click="getPlayer(3)">Italy</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<br> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active"> 
     <top-player-view country_id="1"></top-player-view> 
    </div> 
</div> 

Мой компонент сверху игрок, как это:

<template>  
    ... 
</template> 

<script> 
    export default{ 
     props:['country_id'], 
     created() { 
      this.$store.dispatch('getTopPlayers', this.country_id) 
     } 
     methods: { 
      getPlayer: function(country_id) { 
       this.$store.dispatch('getTopPlayers', country_id) 
      } 
     } 
    } 
</script> 

Я пытаюсь вызвать метод getPlayer в верхнем компоненте вида игрок. Я вызываю метод из представления. Вы можете увидеть мой код выше

При нажатии на вкладку, я проверяю на консоли существует ошибка:

[Vue warn]: Property or method "getPlayer" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

Uncaught TypeError: getPlayer is not a function

Как я могу решить это?

Answer 1

Необходимо называть метод на элементом.

Одно из решений: добавить ref="player" к вашему top-player-view, а затем вызвать $refs.player.getPlayer(1) вместо того, чтобы просто getPlayer(1)