toLowerCase localeCompare не работает в NuxtJs VueJs Framework - PullRequest
Новая
       6

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

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

Я столкнулся с очень странной проблемой в 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>

1 Ответ

0 голосов
/ 11 июля 2018

Я попытался обновить Vue Cli и переустановил модули, и все заработало, спасибо

...