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

Posted 2023-02-23

【中文标题】如何调用具有不同数据属性的组件？ (vue.js 2)

【英文标题】：How can I call a component with data property different? (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>

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

我该如何解决？

【参考方案1】：

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

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