Question

我在NuxtJs（VueJs Framework）中遇到了一个非常奇怪的问题。

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

Cannot read property 'localeCompare' of undefined

Cannot read property 'toLowerCase' of undefined

不确定两个页面上的相同代码出了什么问题，只是它为商店和类别加载的数据差异。如果同时删除localeCompare＆amp; 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>

Answer 1

我试图更新我的vue cli并重新安装了模块，并且可以正常工作，谢谢

toLowerCase localeCompare在NuxtJs VueJs Framework中不起作用

1 个答案: