Question

我的组件在显示和过滤数据库中的数据时确实会遇到一些问题。它返回一个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 一些想法为什么只在活动服务器上而不在我的本地主机上发生这种情况：8000？配置相同，文件相同，数据库相同，数据库内部其他数据相同

TypeError：this.cards.filter不是函数

0 个答案: