ビューからコンポーネントのメソッドを呼び出すにはどうすればよいですか？ （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

ののメソッドを実際に呼び出す必要があります。

一つの解決策：あなたのtop-player-viewにref="player"を追加し、あなたは `VUE-loader`を使用していますだけではなく、getPlayer(1)