Как я могу вызвать компонент каждый щелчок на разных вкладках? (Vue.js 2)

Question

мой взгляд, как это:

<div class="row no-gutter"> 
    <div class="col-md-9 col-xs-12"> 
     <div class="wrap-tabs"> 
      <ul class="nav nav-tabs nav-cat"> 
       <li role="presentation" class="active"><a href="#" data-toggle="tab">England</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab">Spain</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab">Italy</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<br> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active"> 
     <top-player-view country_id="1"></top-player-view> 
    </div> 
</div> 

Мой компонент сверху игрок, как это:

<template>  
    ... 
</template> 

<script> 
    export default{ 
     props:['country_id'], 
     created() { 
      this.$store.dispatch('getTopPlayers', this.country_id) 
     } 
    } 
</script> 

Например, когда я нажимаю вкладку испания, он будет вызывать компонент топ-игрок-вид с cOUNTRY_ID = 2, как этот

<top-player-view country_id="2"></top-player-view> 

Когда я нажимаю вкладку италии, он будет вызывать компонент верхнего играющего вид с cOUNTRY_ID = 3, как этот

<top-player-view country_id="3"></top-player-view> 

Независимо от того, загружены ли данные компонента ajax на вкладку? Или как?

Пожалуйста, помогите

Answer 1

То, что я понял из вашего вопроса, вы хотите обновить top-player-view с различными country_id w.r.t нажмите событие.
country_id должен измениться при запуске события клика.

Таким образом, имущество country_id должно быть привязано к top-player-view.

<div class="row no-gutter"> 
    <div class="col-md-9 col-xs-12"> 
     <div class="wrap-tabs"> 
      <ul class="nav nav-tabs nav-cat"> 
       <li role="presentation" class="active"><a href="#" data-toggle="tab" @click="country_id='1'">England</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab" @click="country_id='2'">Spain</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab" @click="country_id='3'">Italy</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<br> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active"> 
     <top-player-view :country_id="country_id"></top-player-view> 
    </div> 
</div> 

Answer 2

Вы пытаетесь обновить country_id, который является опорой, а не свойством данных. Я не думаю, что вы хотите сделать это ... возможно, добавьте cid к данным, а затем в смонтированный набор this.cid = this.country_id и используйте cid позже. При щелчке измените свойство cid и используйте cid для отображения списка игроков.