Vue.js+Lodash实现WooCommerce产品按分类slug筛选问题求助

问题原因 #

1. 数组方法使用错误：你原来用的every()要求所有项都满足条件，完全不符合「至少匹配一个选中分类」的需求，应该用some()判断是否存在符合条件的项。
2. 空值判断逻辑不严谨：你直接将数组类型的筛选变量和空字符串比较，依赖JS隐式类型转换容易出现判断错误，应该用数组的length属性判断是否有选中项。
3. 初始值类型错误：results初始值为对象{}，但实际存储的是产品数组，应该改成[]避免渲染报错。
4. 缺少多筛选同时生效的逻辑：原代码只有单独选过敏原或单独选分类的处理分支，两个筛选同时选中时会直接返回所有产品。

修改方案 #

1. 基础分类筛选逻辑修改 #

如果你的需求是用户多选分类后，产品只要属于任意一个选中分类就展示（OR逻辑），将原来的分类筛选部分替换为：

this.results.filter(result =>
  this.ageFilter.some(age => 
    result.categories.some(category => category.slug === age)
  )
)

如果你的需求是用户多选分类后，产品必须属于所有选中的分类才展示（AND逻辑），替换为：

this.results.filter(result =>
  this.ageFilter.every(age => 
    result.categories.some(category => category.slug === age)
  )
)

2. 完整优化后的代码 #

以下是修正了空值判断、初始值、多筛选同时生效逻辑的完整代码：

new Vue({
    el: "#allergenContainer",
    data: {
        allergenFilter: [],
        ageFilter: [],
        results: [], // 修正初始值为数组
    },
    created: function() {
        this.results = products;
    },
    methods: {
        filteredResults: function() {
            let filtered = [...this.results];
            // 处理过敏原筛选
            if (this.allergenFilter.length > 0) {
                filtered = filtered.filter(result =>
                    this.allergenFilter.every(allergen => result.allergens.includes(allergen))
                );
            }
            // 处理分类筛选
            if (this.ageFilter.length > 0) {
                filtered = filtered.filter(result =>
                    // 此处默认用OR逻辑，需要AND逻辑就把第一个some改成every
                    this.ageFilter.some(age => 
                        result.categories.some(category => category.slug === age)
                    )
                );
            }
            // 统一排序返回
            return _.orderBy(filtered);
        }
    }
});

额外说明 #

原有模板代码不需要修改，直接调用filteredResults()即可正常渲染筛选后的产品列表。

内容的提问来源于stack exchange，提问作者Andy Holmes