如何在每次单击不同的选项卡时调用组件？ (vue.js 2)答案

【问题标题】：How can I call component each clicking different tabs ? (vue.js 2)如何在每次单击不同的选项卡时调用组件？ (vue.js 2)
【发布时间】：2017-02-19 08:37:38
【问题描述】：

我的看法是这样的：

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

当我点击 italy 选项卡时，它会像这样调用 country_id = 3 的组件 top-player-view

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

组件数据是否通过每个选项卡选择的 ajax 加载？或者怎么做？

请帮忙

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

我从你的问题中了解到，你想用不同的 country_id w.r.t 点击事件来更新 top-player-view。
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>

【讨论】：

它不起作用。存在错误：[Vue warn]: Property or method "country_id" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option。（在根实例中找到）
添加到top-player-view父组件的data属性中，给它一些默认值。
看来我已经添加了。你最好更清楚地更新你的答案。有时我发现很难理解这些词。我的英语不太好:)

【解决方案2】：

您正在尝试更新 country_id 这是一个道具而不是数据属性。我认为您不想这样做...也许将cid 添加到数据中，然后在已安装的集合中添加this.cid = this.country_id 并稍后使用cid。单击更改该 cid 属性并使用 cid 显示播放器列表。

【讨论】：