How can I call method in the component from view? (vue.js 2)

Question

My view is like this :

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

My component top player view is like this :

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

I try call getPlayer method in top player view component. I call the method from view. You can see my code above

When I click the tab, I check on the console exist error :

[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

How can I solve it?

Answer 1

You need to actually call the method on the element.

One solution: add ref="player" to your top-player-view and then call $refs.player.getPlayer(1) instead of just getPlayer(1)