CODEWITHSUNDEEP
vue.js
deskeay
deskeay

Reputation: 273

Get value on click of tab panel in vuejs

          <div class="col-lg-6">
                <a-tabs tabPosition="right">
                    <a-tab-pane v-for="config in listData" :tab="config.name" :key="config._id">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="card">
                          <div class="card-body">
                            <h4 class="text-black mb-3"><strong>{{ config.name }}</strong></h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    </a-tab-pane>
                </a-tabs>
            </div>


<script>
    const listData = [
      {
        _id: '35324',
        name: 'product 1',
      },
      {
        _id: '345434',
        name: 'product 2',
      },
   ];
   created() {
      //I want to get the `config.name` value here every time I click on `tab-pane
   }
</script>

I am working on tab-pane in vuejs. I want when I click on tab-pane I get the name of that pane in created. I'm really stuck. Please give me your opinion. Thank you

Upvotes: 0

Views: 1353

Answers (1)

CosmicDarine
CosmicDarine

Reputation: 118

I'm not sure why you'd like to do that (strange to use that kind of hook this way) but as said before, you may want to use a variable and a click-event function to do that.

enter image description here

In your template :

<a-tab-pane v-for="config in listData" :tab="config.name" :key="config._id" @tabClick="setTabName(config.name)">

...

<h4 class="text-black mb-3"><strong>{{ config.name }}</strong></h4>

...

</a-tab-pane>

in your script :

tabName = '';

setTabName(name) { this.tabName = name; }

Upvotes: 1

Related Questions