javascript - 如何分别单击不同的选项卡来调用组件？ (vue.js 2)

我的看法是这样的：

<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">England</a></li>
                <li role="presentation"><a href="#" data-toggle="tab">Spain</a></li>
                <li role="presentation"><a href="#" data-toggle="tab">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)
        }
    }
</script>

例如，当我单击“西班牙”选项卡时，它将调用country_id = 2的组件top-player-view，如下所示

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

当我单击“义大利”选项卡时，它将调用country_id = 3的组件top-player-view，如下所示

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

是否通过每个选项卡的ajax加载组件数据？或如何？

请帮忙

最佳答案

从您的问题中我了解到的是，您想使用不同的top-player-view点击事件来更新country_id。
触发点击事件时，country_id应该更改。

因此，country_id属性应绑定到top-player-view。

<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="country_id='1'">England</a></li>
                <li role="presentation"><a href="#" data-toggle="tab" @click="country_id='2'">Spain</a></li>
                <li role="presentation"><a href="#" data-toggle="tab" @click="country_id='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="country_id"></top-player-view>
    </div>
</div>