데이터 속성이 다른 구성 요소를 어떻게 호출 할 수 있습니까? (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이 이미 채워진 후에 만 ​​마운트가 호출되기 때문에 디스패치를 ​​초기 렌더링 이전의 라이프 이벤트로 이동해야합니다. 가장 좋은 옵션은 beforeCreate

여기에서 전체 수명주기를 확인하십시오. https://vuejs.org/v2/guide/instance.html