如何制作动态Vue标签，从api加载数据

问题描述

我正在尝试制作选项卡，这些选项卡是通过vuex获取的API中的类别的列表。单击特定标签时如何在标签内容中按ID加载特定类别的数据？

<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>

解决方法

我建议使用computed来过滤标签内容：

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