Ошибка типа: this.cards.filter не является функцией - PullRequest
0 голосов
/ 29 января 2019

У меня будет небольшая проблема с отображением и фильтрацией данных из моей базы данных.Возвращает объект 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?Та же конфигурация, те же файлы, та же база данных, только другие данные в базе данных

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...