Question

刷新主页并转到导航栏中的类别时，我在吸气剂过滤器中出现错误，我得到一个错误，输入错误并渲染。

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)
            },  
        },
    }

谢谢

Answer 1

过滤器来自Array.prototype.filter()，只能在Arrays上调用，不能在任何 Object上调用。初始化状态变量时，您说的是productsShop: {}，其中{}是空对象的简写初始化，而不是[]，它会为您提供一个空数组。

这是否解决了您的问题，还是不完全取决于其余的代码。至于您最初遇到的错误，这就是原因。

Answer 2

只能在数组上调用过滤器！

Vue过滤器类型错误和渲染

2 个答案: