javascript - Vue.js / Lodash - 如果 slug 在 result.categories 数组中，则过滤结果

Question

我正在使用 WP API 在 WooCommerce 中构建产品过滤系统，并且几乎可以正常工作，但我遇到了最后一个障碍。

每个产品都在一个数组中通过其类别，每个类别都是一个数组/对象本身带来id,name和slug。我目前正在尝试仅显示类别slug与用户选择的数组中的内容相匹配的产品。并不是说用户可以选择很多。

具有我要过滤的类别的示例产品：

这就是我的 Vue 数组 (ageFilter) 如何获得用户的选择

我试过做

return _.orderBy(
    this.results.filter(result =>
        this.ageFilter.every(
            age => result.categories.every(category =>
                age === category.slug
            )
        )
    )
);

虽然它返回 true 或 false，但它不会更新过滤的产品。有人可以指出如何正确地做到这一点吗？

这是我的完整 Vue 代码。我只想获取用户所做的一系列选择，并遍历产品的类别并返回任何具有category.slug至少等于用户选择之一的类别。

<script>
    let products = <?php echo wp_remote_retrieve_body($products) ?>;
    
    function escapeRegExp(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    new Vue({
        el: "#allergenContainer",
        data: {
            allergenFilter: [],
            ageFilter: [],
            results: {},
        },
        created: function() {
            let self = this;
            self.results = products;
        },
        methods: {
            filteredResults: function() {
                if (this.allergenFilter && this.ageFilter == "") {
                    return _.orderBy(
                        this.results.filter(result =>
                            this.allergenFilter.every(
                                allergen => result.allergens.includes(allergen)
                            )
                        )
                    );
                } else if(this.ageFilter && this.allergenFilter == ""){
                    return _.orderBy(
                        this.results.filter(result =>
                            this.ageFilter.every(
                                age => result.categories.every(category =>
                                    age === category.slug
                                )
                            )
                        )
                    );
                } 
                else {
                    return _.orderBy(
                        this.results
                    )
                }
            }
        }
    });    
</script>

filteredResults编辑：如果需要，这是正在使用的模板：

<div v-for="result in filteredResults()" class="text-center"> 
    <div class="text-center">
        <a :href="result.permalink">
            <img :src="result.images[0].src" :alt="result.images[0].alt">
        </a>            
        <h2>{{result.name }}</h2>
        <h3 v-html="result.subtitle"></h3>
        <div class="p_more_div">
            <a :href="result.permalink">MORE INFO</a>
        </div>
    </div>        
</div>

标签： javascriptwordpressvue.jswoocommercewoocommerce-rest-api