ToLowerCase localeCompare не работает в NuxtJs VueJs Framework

Я столкнулся с очень странной проблемой в NuxtJs (VueJs Framework).

У меня есть код, который хорошо работает для моего списка магазинов в алфавитном порядке и поискового фильтра. Пока он работал, я скопировал ту же функциональность кода для своих категорий. На следующий день, когда я нажимаю на категории, все работает нормально, но в магазинах выдает две ошибки:

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>

🤔 А знаете ли вы, что...
JavaScript можно использовать для создания анимаций и игр на веб-страницах.


211
1

Ответ:

Решено

Я попытался обновить свой vue cli и переустановил модули, и это сработало, спасибо