0
我的觀點是這樣的:如何調用數據屬性不同的組件? (vue.js 2)
<!-- 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>
後的代碼執行時,數據在由玩家=數據通過上類型。而傳輸的財產數據是不同的。此外,當我點擊任何標籤時,玩家和類型顯示的數據是相同的
我該如何解決?