title: Filter data in VueJs - Vuetify v-tabs
body: <p>I am using NuxtJs a minimal framework of VueJS framework.
  I am trying to filter data on click of tabs.
  I am trying to show the data in alphabetical order and filter them on click of tabs.
  I have a list of stores ranging from letters 'A' - 'Z':</p>
  
  <p>Storeslist : Amazon, BookMyShow,BookmyFlowers, Ebay, Expedia, FabHotels.</p>
  
  <p>And have my tabs as: #, A,B,C,D,E.</p>
  
  <p>I tried with vuetify tabs, I am not able to show a list of stores which start with their first initial like say If I click on tab 'B' it should show BookMyShow and Bookmyflowers stores. But here I have to slice them manually.</p>
  
  <p>Is there other way, where I can do it dynamically without slicing them manually.</p>
  
  <p>Below is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  import axios from "axios";
  
  export default {
    asyncData({ req, params }) {
      return axios.get(process.env.apiURL + "stores").then(res =&gt; {
        return { 
          stores: res.data.sort((a, b) =&gt; a.store_name.localeCompare(b.store_name)),
          storeA: res.data.slice(0,0),
          storeB: res.data.slice(0,1),
          storeC: res.data.slice(1,2),
          storeD: res.data.slice(2,3),
          storeE: res.data.slice(3,5)
        };
      });
    },
    data() {
      return {
        apiURL: process.env.apiURL,
        active: null
      }
    }
  };
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style scoped&gt;
  a {
    color: white;
  }
  
  .card__text {
      padding: 0 !important;
  }
  
  @media screen and (max-width: 320px) {
    .card__media {
      height: 50px !important;
    }
  
    .card__text {
      padding: 0 !important;
    }
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-container grid-list-md text-xs-center&gt;
      &lt;br/&gt;
  
   &lt;v-tabs v-model="active" light grow slider-color="red"&gt;
          &lt;v-tab active&gt;#&lt;/v-tab&gt;
          &lt;v-tab &gt;A&lt;/v-tab&gt;&lt;v-tab &gt;B&lt;/v-tab&gt;
          &lt;v-tab &gt;C&lt;/v-tab&gt;&lt;v-tab &gt;D&lt;/v-tab&gt;
  
          &lt;v-tab-item&gt;    
          &lt;v-layout row wrap&gt;
            &lt;v-flex v-for="(store, index) in stores" :key="index" xs6 sm4 md2 lg2 xl3&gt;
              &lt;v-card light&gt;
              &lt;nuxt-link :to="'/store/'+store.store_name"&gt;
            &lt;v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"&gt;&lt;/v-card-media&gt;
              &lt;v-card-text class="blue"&gt;{{store.store_name}}&lt;/v-card-text&gt;
              &lt;/nuxt-link&gt;
            &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
          &lt;/v-tab-item&gt;
  
          &lt;v-tab-item&gt;    
          &lt;v-layout row wrap&gt;
            &lt;v-flex v-for="(store, index) in storeA" :key="index" xs6 sm4 md2 lg2 xl3&gt;
              &lt;v-card light&gt;
              &lt;nuxt-link :to="'/store/'+store.store_name"&gt;
            &lt;v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"&gt;&lt;/v-card-media&gt;
              &lt;v-card-text class="blue"&gt;{{store.store_name}}&lt;/v-card-text&gt;
              &lt;/nuxt-link&gt;
            &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
          &lt;/v-tab-item&gt;
  
          
          &lt;v-tab-item&gt;          
          &lt;v-layout row wrap&gt;
            &lt;v-flex v-for="(store, index) in storeB" :key="index" xs6 sm4 md2 lg2 xl3&gt;
              &lt;v-card light&gt;
              &lt;nuxt-link :to="'/store/'+store.store_name"&gt;
            &lt;v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"&gt;&lt;/v-card-media&gt;
              &lt;v-card-text class="blue"&gt;{{store.store_name}}&lt;/v-card-text&gt;
              &lt;/nuxt-link&gt;
            &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
          &lt;/v-tab-item&gt;
  
  
          &lt;v-tab-item&gt;          
          &lt;v-layout row wrap&gt;
            &lt;v-flex v-for="(store, index) in storeC" :key="index" xs6 sm4 md2 lg2 xl3&gt;
              &lt;v-card light&gt;
              &lt;nuxt-link :to="'/store/'+store.store_name"&gt;
            &lt;v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"&gt;&lt;/v-card-media&gt;
              &lt;v-card-text class="blue"&gt;{{store.store_name}}&lt;/v-card-text&gt;
              &lt;/nuxt-link&gt;
            &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
          &lt;/v-tab-item&gt;
  
        
        &lt;v-tab-item&gt;    
          &lt;v-layout row wrap&gt;
            &lt;v-flex v-for="(store, index) in storeD" :key="index" xs6 sm4 md2 lg2 xl3&gt;
              &lt;v-card light&gt;
              &lt;nuxt-link :to="'/store/'+store.store_name"&gt;
            &lt;v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"&gt;&lt;/v-card-media&gt;
              &lt;v-card-text class="blue"&gt;{{store.store_name}}&lt;/v-card-text&gt;
              &lt;/nuxt-link&gt;
            &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-tab-item&gt;
  
        &lt;v-tab-item&gt;    
          &lt;v-layout row wrap&gt;
            &lt;v-flex v-for="(store, index) in storeE" :key="index" xs6 sm4 md2 lg2 xl3&gt;
              &lt;v-card light&gt;
              &lt;nuxt-link :to="'/store/'+store.store_name"&gt;
            &lt;v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"&gt;&lt;/v-card-media&gt;
              &lt;v-card-text class="blue"&gt;{{store.store_name}}&lt;/v-card-text&gt;
              &lt;/nuxt-link&gt;
            &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-tab-item&gt;
  
  
  
        &lt;/v-tabs&gt;
      
    &lt;/v-container&gt;  
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>