CODEWITHSUNDEEP
vue.jstabsvuexnuxt.js
Alexander
Alexander

Reputation: 71

how to make dynamic vue tabs, loading data from api

I'm trying to make tabs, which are a list of categories from an API obtained through vuex. How do I load data of a certain category by ID in tab content when clicking on a specific tab?

<ul class="tabs">
   <li class="list-group-item" v-for="(category, index) in SUB_CATS(681)" :key="category.id">
      <button class="d-block tab-btn" :class="['tab-button', { active: currentTab === index[0] }]"> 
        {{category.title}}
      </button>
   </li>
</ul>
//tabs-content

<div class="tab-content">
   <div class="tab-pane fade" 
     v-for="product in products" :key="product.id"
     :class="{ 'active show': isActive('tab-1')}">
      <div class="product-item">
        {{ product.name }}
      </div>
  </div>
</div>

Upvotes: 0

Views: 1723

Answers (1)

lightmyfire
lightmyfire

Reputation: 174

I would suggest to use the computed to filter the tab content:

var app = new Vue({
  el: '#app',
  data: {
    categories: ['Cat1', 'Cat2', 'Cat3'],
    content: [{text: 'text1', category: 'Cat1'},{text: 'text2', category: 'Cat2'},{text: 'text3', category: 'Cat3'}],
    activeCategory: 'Cat1'
  },
  computed:{
    activeContent(){
      return this.content.filter(x => x.category === this.activeCategory)
    }
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <div>
    <button v-for="category in categories" :key="category" @click="activeCategory = category">{{category}}</button>
  </div>
  <div>
    {{activeContent}}
  </div>
</div>

Codepen Example

Upvotes: 1

Related Questions