Javascript 按复选框vue js筛选产品

我正在尝试在laravel中使用vue js实现复选框过滤器，但它没有按预期工作。对于第一个复选框All，当我选中和取消选中复选框时，它可以工作并显示/隐藏所有产品。但对于科技、娱乐和虚构行业，它并没有基于复选框点击过滤产品

<template>
    <div class="container">
        <div class="row ">
            <div class="col-md-4">
                <div class="filter">
                    <label><input type="checkbox" v-model="selectedCategory" value="0" /> All</label>
                    <label><input type="checkbox" v-model="selectedCategory" value="1" /> Tech</label>
                    <label><input type="checkbox" v-model="selectedCategory" value="2" /> Entertainment</label>
                    <label><input type="checkbox" v-model="selectedCategory" value="3" /> Fictional</label>
                </div>

    </div>
            </div>
            <div class="col-md-8">
                <div class="card" v-for="product in filteredProduct">
                    <div class="card-header">{{product. name}}</div>

                    <div class="card-body">
                        <img :src="product.image">
                        <p>{{product.price}}</p>
                        <p>{{product.category_id}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

        data:function(){
            return {
                products:[],
                selectedCategory: ["0"],

            }

        },
        computed: {
        filteredProduct: function() {
        var app = this;
        var category = app.selectedCategory;
        console.log(category)

        if(category.includes("0")) {
            return app.products;
        } else {

            return app.products.filter(function(p) {

            return category.includes(p.category_id);
        });

            }
        }
    },
        mounted() {
            console.log('Product mounted.')
            var app = this;
            axios.get('/products')
                .then(function (resp) {
                    app.products = resp.data;
                })
                .catch(function (resp) {
                    console.log(resp);
                    alert("Could not load");
                });
        }
    }
</script>

全部的
技术人员
游戏娱乐
虚构的
{{product.name}
{{product.price}}

{{product.category_id}

导出默认值{
数据：函数（）{
返回{
产品：[]，
所选类别：[“0”]，
}
},
计算：{
filteredProduct:函数（）{
var-app=这个；
var category=app.selectedCategory；
console.log（类别）
if（类别包括（“0”））{
返回app.products；
}否则{
返回app.products.filter（函数（p）{
退货类别。包括（p.category\U id）；
});
}
}
},
安装的（）{
console.log（'产品已安装'）
var-app=这个；
axios.get（“/products”）
.然后（功能（resp）{
app.products=resp.data；
})
.catch（函数（resp）{
控制台日志（resp）；
警报（“无法加载”）；
});
}
}

---

任何帮助都将不胜感激

我猜

产品中的
类别id
数组的类型为编号。但是，
selectedCategory
数组具有字符串格式的数字。使用严格相等来检查数组中是否存在提供的值。这就是为什么它适用于
“0”
，因为它是作为字符串提供的。如果将其更改为
p.category\u id.toString（）
，它将工作：

下面是一个工作片段：


newvue({
el:“#应用程序”，
数据：函数（）{
返回{
产品：[{类别id:1，名称：“技术1”}，{类别id:1，名称：“技术2”}，{类别id:2，名称：“娱乐1”}，{类别id:3，名称：“虚拟1”}，
所选类别：[“0”]，
}
},
计算：{
filteredProduct:函数（）{
const app=此，
类别=app.selectedCategory；
if（类别包括（“0”））
返回app.products；
其他的
返回app.products.filter（p=>
category.includes（p.category\u id.toString（））
);
}
}
})

全部的
技术人员
游戏娱乐
虚构的
{{product.name}
我希望删除所有复选框，并希望首先在页面中显示所有产品，并希望仅基于技术、小说等复选框筛选数据，但不基于所有复选框。因此，如果用户未选中Tech check（技术检查），例如，如果他单击Tech复选框，则显示所有结果并过滤数据。如何操作？@David如果选择了
Tech
，则您要取消选择
all
？@David hi，请单击答案左侧的灰色复选标记接受答案