如何调用具有不同数据属性的组件？ (vue.js 2)答案

【问题标题】：How can I call a component with data property different? (vue.js 2)如何调用具有不同数据属性的组件？ (vue.js 2)
【发布时间】：2017-07-09 11:23:27
【问题描述】：

我的看法是这样的：

<!-- By Players -->
<div class="row no-gutter">
    <div class="col-md-3">
        <h2 class="nav-cat-text">By Players</h2>
    </div>
    <div class="col-md-9 col-xs-12">
        <div class="wrap-tabs">
            <ul class="nav nav-tabs nav-cat">
                @foreach($by_players as $category)
                    @php 
                    if($loop->first)
                        $category_id = $category->id
                    @endphp
                    <li role="presentation" class="{{ $loop->first ? 'active' : '' }}"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer({{ $category->id }})">{{ ucfirst($category->name) }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
<br>
<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active">
        <top-player-view category_id="{{ $category_id }}" ref="player"></top-player-view>
    </div>
</div>

<br>
<!-- By Types -->
<div class="row no-gutter">
    <div class="col-md-3">
        <h2 class="nav-cat-text">By Types</h2>
    </div>
    <div class="col-md-9 col-xs-12">
        <div class="wrap-tabs">
            <ul class="nav nav-tabs nav-cat">
                @foreach($by_types as $category)
                    @php 
                    if($loop->first)
                        $category_id = $category->id
                    @endphp
                    <li role="presentation" class="{{ $loop->first ? 'active' : '' }}"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer({{ $category->id }})">{{ ucfirst($category->name) }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
<br>
<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" >
        <top-player-view category_id="{{ $category_id }}" ref="player"></top-player-view>
    </div>
</div>

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

<template>    
    ...
</template>

<script>
    export default {
        props:['category_id'],
        mounted() {
            const payload = {category_id: this.category_id}
            this.$store.dispatch('getTopPlayers', payload)
        },
        methods: {
            getPlayer: function(category_id) {
                const payload = {category_id: category_id}
                this.$store.dispatch('getTopPlayers', payload)
            }
        }
    }
</script>

代码执行后，玩家数据 = 类型数据。而传输的属性数据是不同的。此外，当我点击任何标签时，按玩家和按类型显示的数据是相同的

我该如何解决？

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-resource

【解决方案1】：

我认为您是说第一次渲染时数据不存在。如果是这种情况，mounted 只会在 $el 已经被填充后被调用，所以你应该将调度移动到初始渲染之前的生命周期事件。你最好的选择是beforeCreate

在此处查看完整的生命周期。 https://vuejs.org/v2/guide/instance.html

【讨论】：