[Vuejs]-How can I call component each clicking different tabs ? (vue.js 2)

by

0👍

What I understood from your question is, you want to update top-player-view with different country_id w.r.t click events.

country_id should change when click event is fired.

So country_id property should bind to 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>
👤Srinivas Damam

0👍

You’re trying to update country_id which is a prop and not a data property. I don’t think you want to do that… maybe add cid to data and then in mounted set this.cid = this.country_id and use cid later on. On click change that cid property and use cid to display player list.

👤peaceman

Leave a comment