Encountered a peculiar issue in NuxtJs (VueJs Framework).
I previously had code that successfully displayed my stores in alphabetical order with a search filter. When I tried to replicate the same functionality for categories, everything seemed to be working fine. However, the next day, while the categories page worked flawlessly, the stores page threw two errors:
Cannot read property 'localeCompare' of undefined
Cannot read property 'toLowerCase' of undefined
I'm puzzled as to what caused this error, considering the code is identical on both pages; the only difference lies in the data loaded for stores and categories. Removing both localeCompare & toLowerCase seems to resolve the issue, but it disrupts the search filter functionality and list ordering. Below is an excerpt from my code:
<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>
&vt;v-container grid-list-md text-xs-center>
&vt;v-text-field append-icon="search" v-model="search" id="filter" name="filter"
label="Search Your Favorite Store . . . ." auto-grow autofocus dont-fill-mask-blanks solo>
&vt;/v-text-field>
&vt;<br/>
&vt;v-tabs grow dark color="teal accent-4" show-arrows slider-color="white">
&vt;<v-tab active>#</v-tab>
&vt;<v-tab v-for="n in storeList" :key="n" ripple @click="filterStore(n)">{{ n }}</v-tab>
&vt;<v-tab-item>
&vt;<v-layout row wrap>
&vt;<v-flex v-for="(store, index) in AllStores" :key="index" xs6 sm4 md2 lg2 xl3>
&vt;<v-card light>
&vt;<nuxt-link :to="'/store/'+store.store_name">
&vt;<v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
&vt;<v-card-text class="blue">{{store.store_name}}</v-card-text>
&vt;</nuxt-link>
&vt;</v-card>
&vt;</v-flex>
&vt;</v-layout>
&vt;</v-tab-item>
&vt;<br/>
&vt;<v-layout row wrap>
&vt;<v-flex v-if="filterStores != ''" v-for="(store, index) in filterStores" :key="index" xs6 sm4 md2 lg2 xl3>
&vt;<v-card light>
&vt;<nuxt-link :to="'/store/'+store.store_name">
&vt;<v-card-media :src="`${apiURL}containers` + `${store.store_image}`" height="80px"></v-card-media>
&vt;<v-card-text class="blue">{{store.store_name}}</v-card-text>
&vt;</nuxt-link>
&vt;</v-card>
&vt;</v-flex>
&vt;<v-flex v-else>No Stores Available starting with this letter</v-flex>
&vt;</v-layout>
&vt;</v-container>
&vt;</template>