关于javascript:如何从视图中调用组件中的方法?

How can I call method in the component from view? (vue.js 2)我的看法是这样的:[cc lang=javascript] England ...

我的看法是这样的:

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

我该如何解决呢?

相关讨论


你需要实际调用元素上的方法。

一种解决方案:
ref="player" 添加到您的 top-player-view 中,然后调用 $refs.player.getPlayer(1) 而不仅仅是 getPlayer(1)

本文标题为:关于javascript:如何从视图中调用组件中的方法?

基础教程推荐