データプロパティが異なるコンポーネントをどのように呼び出すことができますか？ （vue.js 2）

Question

マイビューは次のようである：

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

、によって上の選手による=データに対してデータタイプ。一方、送信されるプロパティデータは異なる。また、いずれかのタブをクリックすると、プレイヤーとタイプによって表示されるデータは同じです

どうすれば解決できますか？

Answer 1

私は、データが最初にレンダリングされるときにそこにデータがないと言っていると思います。その場合、$ elがすでに設定された後にのみmountが呼び出されるため、ディスパッチを初期レンダリングの前のライフサイクルイベントに移動する必要があります。最適なオプションはbeforeCreate

ここでは完全なライフサイクルをチェックします。 https://vuejs.org/v2/guide/instance.html