Фильтрация данных в VueJs - Vuetify v-tabs - PullRequest
Новая
       13

Фильтрация данных в VueJs - Vuetify v-tabs

0 голосов
/ 17 мая 2018

Я использую NuxtJs минимальный фреймворк VueJS. Я пытаюсь отфильтровать данные по нажатию вкладок. Я пытаюсь показать данные в алфавитном порядке и отфильтровать их по нажатию вкладок. У меня есть список магазинов, начиная от букв «A» - «Z»:

Список магазинов: Amazon, 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>

1 Ответ

0 голосов
/ 17 мая 2018

Это может быть достигнуто путем определения постоянной 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
    }
  }
})
...