Wie kann ich Methode in der Komponente aus Sicht aufrufen? (Vue.js 2)

Question

Meine Ansicht ist, wie folgt aus:

<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> 

Meine Komponente Topspieler Ansicht ist wie folgt:

<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> 

Ich nenne versuchen getPlayer Methode in Top-Spieler Ansicht Komponente. Ich rufe die Methode aus der Sicht auf. Sie können meinen Code oben

sehen Wenn ich auf die Registerkarte klicken, überprüfe ich auf der Konsole vorhanden Fehler:

[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

Wie kann ich es lösen?

Answer 1

Sie müssen tatsächlich die Methode auf das Element aufrufen.

Eine Lösung: hinzufügen ref="player" zu Ihrem top-player-view und rufen Sie dann $refs.player.getPlayer(1) statt nur getPlayer(1)