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

这可以通过定义int main(){ A a; std::cout<<a.foo()<<std::endl; std::cout<<a.B.foo()<<std::endl; return 0; }常量并使用Vue filterList

来实现

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

methods

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

1 个答案: