Vue 过滤器类型错误和渲染

debugcn 发表于 Dev

艾哈迈德·马姆杜

当我刷新主页并转到导航栏中的类别时，getter 过滤器中出现错误我收到了错误类型错误并呈现。

TypeError: state.productsShop.filter is not a function

Error in render: "TypeError: state.subCategoiesShop.filter is not a function"

TypeError: state.subCategoiesShop.filter is not a function

(in promise) TypeError: state.subCategoiesShop.filter is not a function

我从过滤器中得到的所有这些错误

我的状态

state: {
        filter: 'all',
        subFilter: 'all',
        products: {},
        categories: {},
        categoriesNav: {},
        products_4: {},
        productsShop: {},
        subCategoiesShop: {},
        aboutBanar: {},
    },

我的吸气剂在这里是我的问题

getters: {
        productsFiltered(state) {
            if (state.subFilter == 'all' && state.filter == 'all') {
                return state.productsShop
            } else {
                return state.productsShop.filter(function(product) {

                    return (state.subFilter === 'all' ? product.category_id > 0 : product.category_id === state.subFilter ) && (state.filter === 'all' ? product.subcategory_id > 0 : product.subcategory_id === state.filter )
                    // return product.category_id == state.subFilter && pr  oduct.subcategory_id == state.filter
                })
            }
            // return state.productsShop
        },
        subCategoryShopFilter(state) {
            if (state.subFilter == 'all') {
                return state.subCategoiesShop
            } else {
                return state.subCategoiesShop.filter(category => { 
                    return category.category_id === state.subFilter
                })
            }
            // return state.subCategoiesShop
        }
    },

我的突变

updateCategory(state, subFilter) {
            state.subFilter = subFilter
        },
        updateSubCategory(state, filter) {
            state.filter = filter
        },
        landingFirst(state, products) {
            state.products = products
        },
        landingSecond(state, categories) {
            state.categories = categories
        },
        landingThird(state, products_4) {
            state.products_4 = products_4
        },
        categories(state, categories) {
            state.categoriesNav = categories
        },
        products(state, productsShop) {
            state.productsShop = productsShop
        },
        subcategories(state, subcategories) {
            state.subCategoiesShop = subcategories
        },
        retriveAbout(state, aboutBanar) {
            state.aboutBanar = aboutBanar
        },

    },

我的行动

来自 Laravel api 路由的 Axios API

updateCategory(context, subFilter) {
            context.commit('updateCategory', subFilter) 
        },
        updateSubCategory(context, filter) {
            context.commit('updateSubCategory', filter) 
        },
categories(context) {
            return new Promise((resolve, reject) => {
                axios.get('categories')
                .then(response => {
                    context.commit('categories', response.data)
                    resolve(response)
                })
                .catch(error => {
                    reject(error)
                })
            })
        },
        products(context) {
            return new Promise((resolve, reject) => {
                axios.get(`shop/products`)
                .then(response => {
                    context.commit('products', response.data)
                    resolve(response)
                })
                .catch(error => {
                    reject(error)
                })
            })
        },
        subCategories(context) {
            return new Promise((resolve, reject) => {
                axios.get(`shop/subcategories`)
                .then(response => {
                    context.commit('subcategories', response.data)
                    resolve(response)
                })
                .catch(error => {
                    reject(error)
                })
            })
        },

我的 Shop.vue 组件

export default {
        props: {
            link: {
                type: String,
            },
            slug: {
                type: String,
            },
        },
        data() {
            return {
                filter: 'all',
                categories: {},
            }
        },
        mounted() {
            this.$store.dispatch('products')
            this.$store.dispatch('subCategories')
        },

        computed: {
            productsFilter() {
                return this.$store.getters.productsFiltered
            },
            categories1() {
                return this.categories = this.$store.state.categoriesNav
            },
            subCategoryShopFilter() {
                return this.$store.getters.subCategoryShopFilter
            },
        },
        methods: {
            changeFilter(filter) {
                this.$store.dispatch('updateSubCategory', filter)
            },  
        },
    }

谢谢

胡安·科尔特斯

Filter 来自Array.prototype.filter()它只能在Arrays上调用，不能在任何Object上调用。当你初始化你的状态变量时，你说productsShop: {}的{}是空对象的速记初始化，而不是[]给你一个空数组。