在 VueJs 中过滤数据 - Vuetify v-tabs

Question

我正在使用 NuxtJs 一个 VueJS 框架的最小框架。 我正在尝试通过单击选项卡来过滤数据。 我正在尝试按字母顺序显示数据并在单击选项卡时对其进行过滤。 我有一个从字母“A”到“Z”的商店列表：

商店列表：亚马逊、BookMyShow、BookmyFlowers、Ebay、Expedia、FabHotels。

并将我的标签设置为：#、A、B、C、D、E。

我尝试使用 vuetify 选项卡，我无法显示以第一个首字母开头的商店列表，例如如果我单击选项卡“B”，它应该显示 BookMyShow 和 Bookmyflowers 商店。但在这里我必须手动切片。

还有其他方法，我可以动态地做到这一点而无需手动切片。

下面是我的代码：

<script>
import axios from "axios";

export default {
  asyncData({ req, params }) {
    return axios.get(process.env.apiURL + "stores").then(res => {
      return { 
        stores: res.data.sort((a, b) => 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
    }
  }
};
</script>

<style scoped>
a {
  color: white;
}

.card__text {
    padding: 0 !important;
}

@media screen and (max-width: 320px) {
  .card__media {
    height: 50px !important;
  }

  .card__text {
    padding: 0 !important;
  }
}
</style>

<template>
  <v-container grid-list-md text-xs-center>
    <br/>

 <v-tabs v-model="active" light grow slider-color="red">
        <v-tab active>#</v-tab>
        <v-tab >A</v-tab><v-tab >B</v-tab>
        <v-tab >C</v-tab><v-tab >D</v-tab>

        <v-tab-item>    
        <v-layout row wrap>
          <v-flex v-for="(store, index) in stores" :key="index" xs6 sm4 md2 lg2 xl3>
            <v-card light>
            <nuxt-link :to="'/store/'+store.store_name">
          <v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
            <v-card-text class="blue">{{store.store_name}}</v-card-text>
            </nuxt-link>
          </v-card>
          </v-flex>
        </v-layout>
        </v-tab-item>

        <v-tab-item>    
        <v-layout row wrap>
          <v-flex v-for="(store, index) in storeA" :key="index" xs6 sm4 md2 lg2 xl3>
            <v-card light>
            <nuxt-link :to="'/store/'+store.store_name">
          <v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
            <v-card-text class="blue">{{store.store_name}}</v-card-text>
            </nuxt-link>
          </v-card>
          </v-flex>
        </v-layout>
        </v-tab-item>

        
        <v-tab-item>          
        <v-layout row wrap>
          <v-flex v-for="(store, index) in storeB" :key="index" xs6 sm4 md2 lg2 xl3>
            <v-card light>
            <nuxt-link :to="'/store/'+store.store_name">
          <v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
            <v-card-text class="blue">{{store.store_name}}</v-card-text>
            </nuxt-link>
          </v-card>
          </v-flex>
        </v-layout>
        </v-tab-item>


        <v-tab-item>          
        <v-layout row wrap>
          <v-flex v-for="(store, index) in storeC" :key="index" xs6 sm4 md2 lg2 xl3>
            <v-card light>
            <nuxt-link :to="'/store/'+store.store_name">
          <v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
            <v-card-text class="blue">{{store.store_name}}</v-card-text>
            </nuxt-link>
          </v-card>
          </v-flex>
        </v-layout>
        </v-tab-item>

      
      <v-tab-item>    
        <v-layout row wrap>
          <v-flex v-for="(store, index) in storeD" :key="index" xs6 sm4 md2 lg2 xl3>
            <v-card light>
            <nuxt-link :to="'/store/'+store.store_name">
          <v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
            <v-card-text class="blue">{{store.store_name}}</v-card-text>
            </nuxt-link>
          </v-card>
          </v-flex>
        </v-layout>
      </v-tab-item>

      <v-tab-item>    
        <v-layout row wrap>
          <v-flex v-for="(store, index) in storeE" :key="index" xs6 sm4 md2 lg2 xl3>
            <v-card light>
            <nuxt-link :to="'/store/'+store.store_name">
          <v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
            <v-card-text class="blue">{{store.store_name}}</v-card-text>
            </nuxt-link>
          </v-card>
          </v-flex>
        </v-layout>
      </v-tab-item>



      </v-tabs>
    
  </v-container>  
</template>

Answer 1

这可以通过定义 filterList 常量并使用 Vue methods 来实现

演示：https://codepen.io/ittus/pen/OZaNWg

<div id="app">
   <v-container grid-list-md text-xs-center>
      <br/>
      <v-tabs v-model="active" light grow slider-color="red">
         <v-tab v-for="filter in filterList" :key="filter.title">{{ filter.title }}</v-tab>
         <v-tab-item v-for="filter in filterList" :key="filter.title">
            <v-layout row wrap>
               <v-flex v-for="(store, index) in storeFilter(filter.term)" :key="index" xs6 sm4 md2 lg2 xl3>
                  <v-card light>
                     <v-card-text class="blue">{{ store }}</v-card-text>
                  </v-card>
               </v-flex>
            </v-layout>
         </v-tab-item>
         </template>
      </v-tabs>
   </v-container>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      active: null,
      stores: [
        'Amazon',
        'BookMyShow',
        'BookmyFlowers',
        'Ebay',
        'Expedia',
        'FabHotels'
      ],
      filterList: [
        {
          title: '#'
        }, {
          title: 'A',
          term: 'a'
        }, {
          title: 'B',
          term: 'b'
        }, {
          title: 'C',
          term: 'c'
        }, {
          title: 'D',
          term: 'd'
        }, {
          title: 'E',
          term: 'e'
        }, {
          title: 'F',
          term: 'f'
        }
      ]
    }
  },
  methods: {
    storeFilter(char) {
      const res = this.stores
      if (char) {
        return this.stores.filter(store => store.toLowerCase()[0] === char)
      }
      return res
    }
  }
})