У меня будет небольшая проблема с отображением и фильтрацией данных из моей базы данных.Возвращает объект JSON, и если он становится большим, я получаю ошибку «TypeError: this.cards.filter не является функцией».В моем тестовом обзоре он работает, но в реальной базе данных он падает.
Код:
<div class="container sidebar-container">
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a class="nav-link navbar" v-on:click.prevent="cardsFilterKey = 'all'" :class="{ active: cardsFilterKey == 'all'}">Alle</a>
</li>
<li class="nav-item">
<a class="nav-link navbar" v-on:click.prevent="cardsFilterKey = 'livingspaces'" :class="{ active: cardsFilterKey == 'livingspaces'}">Wohnraum</a>
</li>
<li class="nav-item">
<a class="nav-link navbar" v-on:click.prevent="cardsFilterKey = 'therapies'" :class="{ active: cardsFilterKey == 'therapies'}">Therapien</a>
</li>
<li class="nav-item">
<a class="nav-link navbar" v-on:click.prevent="cardsFilterKey = 'news'" :class="{ active: cardsFilterKey == 'news'}">News</a>
</li>
<li class="nav-item">
<a class="nav-link navbar" v-on:click.prevent="cardsFilterKey = 'achievements'" :class="{ active: cardsFilterKey == 'achievements'}">Erfolge</a>
</li>
<li class="nav-item">
<a class="nav-link navbar" v-on:click.prevent="cardsFilterKey = 'events'" :class="{ active: cardsFilterKey == 'events'}">Events</a>
</li>
</ul>
</div>
Отображение данных:
<div class="col-md-4" v-for="(card, index) in cardsFilter" style="padding-bottom:2em;">
<div class="card w-100 text-center card-div" style="width:18rem">
<img src="/img/card2.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">{{card.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{card.category}}</h6>
<p class="card-text">{{card.description}}</p>
<button @click="showTextModal(index)" type="button" class="btn btn-primary">Zeige mehr Infos</button>
</div>
</div>
</div>
Фильтрация данных:
<script>
export default {
data() {
return {
cards: [],
validationErrors: '',
uri: process.env.MIX_CARDS_URL,
isHidden: true,
cards_modal: [],
cardsFilterKey: 'all'
}
},
methods: {
showTextModal(index) {
$("#textModal").modal("show");
this.cards_modal = this.cards[index];
},
loadCards() {
axios.get(this.uri).then(response=>{
this.cards = response.data.sortedData;
this.loading=true;
})
}
},
computed: {
cardsFilter() {
return this[this.cardsFilterKey]
},
all(){
return this.cards
},
news() {
return this.cards.filter((card) => card.category == 'news')
},
achievements() {
return this.cards.filter((card) => card.category == 'achievements')
},
events() {
return this.cards.filter((card) => card.category == 'events')
},
livingspaces() {
return this.cards.filter((card) => card.category == 'livingspaces')
},
therapies() {
return this.cards.filter((card) => card.category == 'therapies')
}
},
mounted() {
this.loadCards();
}
}
</script>
JSON:
{
sortedData: [
{
id: 1,
title: "Test2222",
description: "Test",
text: "Test",
category: "achievement",
created_at: "2019-01-17 15:56:14",
updated_at: "2019-01-25 12:25:26"
},
{
id: 2,
title: "TestView",
description: "asd",
text: "asd",
category: "achievements",
created_at: "2019-01-18 12:06:40",
updated_at: "2019-01-18 12:06:40"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Testr",
category: "news",
created_at: "2019-01-16 16:05:51",
updated_at: "2019-01-16 16:05:51"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Test",
category: "livingspaces",
created_at: "2019-01-16 16:31:53",
updated_at: "2019-01-16 16:31:53"
},
{
id: 2,
title: "Test",
description: "Test",
text: "Test",
category: "livingspaces",
created_at: "2019-01-17 15:55:48",
updated_at: "2019-01-17 15:55:48"
},
{
id: 3,
title: "Test",
description: "asdsadsadsadsadsdsdsadasdasdasdsadasdadsadsadasdsasadasdsadsadasdsads",
text: "Tesst",
category: "achievement",
created_at: "2019-01-28 15:15:20",
updated_at: "2019-01-28 15:15:20"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Test",
category: "events",
created_at: "2019-01-16 16:43:05",
updated_at: "2019-01-16 16:43:05"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Test",
category: "therapien",
created_at: "2019-01-16 16:42:35",
updated_at: "2019-01-16 16:42:35"
},
{
id: 2,
title: "TestFinal",
description: "Test",
text: "Test",
category: "therapies",
created_at: "2019-01-18 12:20:17",
updated_at: "2019-01-18 12:20:17"
}
]
}
изображение: https://imgur.com/a/ZNnnjEb Некоторые идеи, почему это происходит только на live-сервере, а не на моем локальном хосте: 8000?Та же конфигурация, те же файлы, та же база данных, только другие данные в базе данных