关于javascript：如何从视图中调用组件中的方法？ (vue.js 2)

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

我的看法是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul class="nav nav-tabs nav-cat">
<li role="presentation" class="active">England
</li>

<li role="presentation">Spain
</li>

<li role="presentation">Italy
</li>

</ul>

<top-player-view country_id="1"></top-player-view>

我的组件顶部播放器视图是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>
...
</template>

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

我尝试在顶级播放器视图组件中调用 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

我该如何解决呢？