Javascript 如何在VueJS中创建多存储筛选器？

我是VueJS的新手，这是我的第一个大项目。在这个项目中，我有两个元素过滤器，一个是搜索栏，另一个基于复选框。正如您在我的代码中所看到的，我有一个带有2个过滤器的计算属性，第二个过滤器应该显示具有相同品牌的产品，但它不起作用，我不知道为什么。如果有人有主意，那就太酷了；）

苹果


三星


{{product.title}}
{{product.description}}

{{product.brand}}

从“../app”导入应用程序
从“vuex”导入{mapActions}；
导出默认值{
组成部分：{
应用程序
},
数据（）{
返回{
秀:假,，
搜索：“”，
品牌：[‘苹果’、‘三星’]，
getBrand:[]，
}
},
计算：{
产品（）{
退回此。$store.state.products；
},
过滤：函数（）{
返回此.products.filter（（产品）=>{
返回product.title.toLowerCase（）.match（this.search.toLowerCase（））
返回product.brand.match（this.getBrand.includes（brand））
})
},
},
方法：{
…映射操作([
“当前产品”，
]),
getProduct（产品）{
本产品（产品）；
}
},
};

同一函数不能返回两次。使用

&&

链接条件，或在另一个调用

过滤器中链接条件

您还误用了
match
。参数必须是RegExp或可以安全转换为RegExp的内容。如果键入在RegExp中具有特殊含义的字符，如
[
，您可以在控制台中看到问题。您的意思可能是
包含

第二个条件似乎也不正确。不完全清楚
匹配
和
的组合试图实现什么，但我认为你在寻找这样的东西：

返回此.products.filter（（产品）=>{
return product.title.toLowerCase（）.includes（this.search.toLowerCase（））&&
此.getBrand.includes（产品.品牌）
})

值得注意的是，虽然这两个条件都使用名为
includes
的方法，但它们是两个不同的方法，一个在字符串上，另一个在数组上

这似乎也是错误的：

v-bind:value="brand"

brand
是一个字符串数组，您不会使用
v-for
在其上循环。将其更改为
value=“Apple”
和
value=“Samsung”
，以确保大小写与数据匹配

我还建议删除
v-on:click=“filtered”。不确定要做什么，但似乎把计算属性当作点击监听器。
谢谢你的回答。我按照你建议我做的去做，但我不明白，我有一个空白页。空白页是由于这段代码：<代码> & & .g.Brand。包括（产品。品牌）
。有故障吗？就我个人而言，我什么也看不到。@coco_282有控制台错误吗？所谓“空白页”是指一个空列表吗？
getBrand
最初是空的，因此没有选择任何品牌，也没有匹配的。这很容易修复。除此之外，请尝试一些调试，检查
getBrand
中的内容以及所选内容在
product.brand
中，它们需要完美匹配，包括案例，才能起作用。
v-bind:value="brand"