Я столкнулся с очень странной проблемой в 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 можно использовать для создания анимаций и игр на веб-страницах.