代码之家  ›  专栏  ›  技术社区  ›  Kamlesh Katpara

在nuxtjs vuejs框架中,tolowercase localecompare不工作

  •  0
  • Kamlesh Katpara  · 技术社区  · 7 年前

    我在nuxtjs(vuejs框架)中遇到了一个非常奇怪的问题。

    我有一个代码,这是我的商店列表工作良好,按字母顺序和搜索过滤器。在工作时,我为我的类别复制了相同的代码功能。第二天,当我点击分类时,它运行良好,但在商店,它给了我两个错误:

    Cannot read property 'localeCompare' of undefined
    
    Cannot read property 'toLowerCase' of undefined
    

    不确定出了什么问题,两个页面上的代码都是一样的,只是它为存储和类别加载的数据不同。如果同时删除localecompare&tolowercase,则会正确加载数据,但不会加载搜索筛选器和无序列表。以下是我的代码:

    <script>
    import axios from "axios";
    
    export default {
      asyncData({ req, params }) {
        return axios.get(process.env.apiURL + "stores").then(res => {
          return { 
            stores: res.data
          };
        });
      },
      data() {
        return {
          apiURL: process.env.apiURL,
          active: null,
          search: "",
          Searched: "",
          filterStores: [],
          storeList: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
        }
      },
      methods: {
        filterStore(n) {
          this.tab = n;
          axios.get(process.env.apiURL + 'stores?filter[where][store_name][regexp]=^\\b' + this.tab + '/i').then(res => {
               return this.filterStores = res.data;
          });
        }
      },
      computed: {
        AllStores: function() {
          return this.stores.filter(store => {
            return store.store_name.toLowerCase().includes(this.search.toLowerCase())
          })
        }
      },
      head: {
        title: "Stores"
      }
    };
    </script>
    <template>
      <v-container grid-list-md text-xs-center>
    
    <v-text-field append-icon="search" v-model="search" id="filter" name="filter" 
    label="Search Your Favourite Store . . . ." auto-grow autofocus dont-fill-mask-blanks solo>
    </v-text-field>
    <br/>
    
    <v-tabs grow dark color="teal accent-4" show-arrows slider-color="white">
    
      <v-tab active>#</v-tab>
      <v-tab v-for="n in storeList" :key="n" ripple @click="filterStore(n)">{{ n }}</v-tab>
    
     <v-tab-item>    
      <v-layout row wrap>
       <v-flex v-for="(store, index) in AllStores" :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>
    
    <br/>
    <v-layout row wrap>
      <v-flex v-if="filterStores != ''" v-for="(store, index) in filterStores" :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-flex v-else>No Stores Available starting with this letter</v-flex>
    </v-layout>
    
    </v-container>  
    </template>
    1 回复  |  直到 7 年前
        1
  •  0
  •   Kamlesh Katpara    7 年前

    我试图更新我的vue cli并重新安装模块,结果成功了,谢谢