Question

我想在我的Vue应用中合并一些过滤器：

        app = new Vue({
            el: '#app',
            data: {
                products: null,
                productGroups: null,
                productPackageWeights: null,
                checkedProductGroupItems: [],
                checkedProductPackageWeights: [],
            },
            created: function created() {
                this.fetchData();
            },
            computed: {
                productsFilter: function () {
                    return this.filterProductGroupItems;
                }
            },        
            methods: {
                fetchData: function () {
                    var vm = this
                    axios.get([MY_JSON_FILE])
                    .then(function(response){
                        console.log(response.data.filter_data.product_package_weights);

                        vm.productPackageWeights = response.data.filter_data.product_package_weights;
                        vm.productGroups = response.data.filter_data.product_groups;
                        vm.products = response.data.products;
                    }).catch(function (error) {
                        alert('Het ophalen van de producten is niet gelukt');
                    });
                },
                filterProductGroupItems: function(data) {
                    if (this.checkedProductGroupItems.length == 0) return true;
                    return this.checkedProductGroupItems.includes(data.features.product_groups.value);
                },  
                filterProductPackageWeights: function(data) {
                    if (this.checkedProductPackageWeights.length == 0) return true;
                    return this.checkedProductPackageWeights.includes(data.features.product_package_weights);
                },                                      
            }
        });

该代码仅适用于 filterProductGroupItems 。如何将 filterProductGroupItems 和 filterProductPackageWeights 结果合并到计算出的 productsFilter 函数中？我还打算制作更多过滤功能。

请帮忙谢谢！

Answer 1

你可以这样做

computed: {
    productsFilter: function () {
        return [...this.filterProductGroupItems(), ...this.filterProductPackageWeights()];
    }
},

或concat

computed: {
    productsFilter: function () {
        return this.filterProductGroupItems().concat(this.filterProductPackageWeights());
    }
},

问题可能是如果一个过滤器返回true，你最终会得到一个包含[true，Obj，Obj ...]的数组，所以你可能想要更改过滤器以返回一个空数组

filterProductGroupItems: function(data) {
    if (this.checkedProductGroupItems.length == 0) return [];
    return this.checkedProductGroupItems.includes(data.features.product_groups.value);
},  
filterProductPackageWeights: function(data) {
    if (this.checkedProductPackageWeights.length == 0) return [];
    return this.checkedProductPackageWeights.includes(data.features.product_package_weights);
},

如何在Vue.js中组合多个过滤器

1 个答案: