Vue.js 使用多组复选框筛选结果

我正在尝试创建一个页面上的工作过滤器，它可以选择按工作职位（如perm、temp）和地点（如英国、苏格兰、威尔士）过滤结果

我有一个可行的解决方案，但它看起来非常冗长，如果添加第三个过滤器，它会变得更加复杂。我希望有人能为我指明一个更清洁、更具可扩展性的解决方案的方向

过滤器的预期行为如下所示：

• 未选中复选框：显示所有作业
• 至少选中一个位置复选框：按位置筛选
• 至少选中一个位置复选框：按位置筛选
• 至少选中一个位置和位置复选框：按两者筛选

您可以在此处将其视为笔：

var-app=新的Vue({
el:“#应用程序”，
数据：{
位置过滤器：[]，
locationFilter:[]，
工作：[{
“名称”：“作业A”，
“位置”：“温度”，
“地点”：“英国”
},
{
“名称”：“作业B”，
'位置'：'perm'，
“地点”：“英国”
},
{
'name'：'Job C'，
“位置”：“温度”，
“地点”：“威尔士”
},
{
'name'：'Job D'，
'位置'：'perm'，
“地点”：“威尔士”
},
{
'name'：'Job E'，
“位置”：“温度”，
“地点”：“苏格兰”
},
{
'name'：'Job F'，
'位置'：'perm'，
“地点”：“苏格兰”
},
],
},
计算：{
filteredJobs:function（）{
const positionFilter=this.positionFilter
const locationFilter=this.locationFilter
if（positionFilter.length&&locationFilter.length）{
返回this.jobs.filter（函数（作业）{
返回位置过滤器。包括（作业位置）和位置过滤器。包括（作业位置）
});
}else if（位置过滤器长度）{
返回this.jobs.filter（函数（作业）{
返回位置过滤器。包括（作业位置）
});
}else if（locationFilter.length）{
返回this.jobs.filter（函数（作业）{
返回位置筛选器。包括（作业位置）
});
}否则{
把这个还给我，乔布斯
}
}
}
});

临时雇员
烫发
英国
威尔士
苏格兰

{{job.name}{{job.position}{{job.location}

考虑到这背后的逻辑，我不会说它太冗长

我能想到的唯一变化是对
过滤器
方法使用箭头语法：


var-app=新的Vue({
el:“#应用程序”，
数据：{
位置过滤器：[]，
locationFilter:[]，
工作：[{
“名称”：“作业A”，
“位置”：“温度”，
“地点”：“英国”
},
{
“名称”：“作业B”，
'位置'：'perm'，
“地点”：“英国”
},
{
'name'：'Job C'，
“位置”：“温度”，
“地点”：“威尔士”
},
{
'name'：'Job D'，
'位置'：'perm'，
“地点”：“威尔士”
},
{
'name'：'Job E'，
“位置”：“温度”，
“地点”：“苏格兰”
},
{
'name'：'Job F'，
'位置'：'perm'，
“地点”：“苏格兰”
},
],
},
计算：{
filteredJobs:function（）{
const positionFilter=this.positionFilter
const locationFilter=this.locationFilter
if（positionFilter.length&&locationFilter.length）{
返回this.jobs.filter（job=>positionFilter.includes（job.position）和&locationFilter.includes（job.location））；
}else if（位置过滤器长度）{
返回this.jobs.filter（job=>positionFilter.includes（job.position））；
}else if（locationFilter.length）{
返回this.jobs.filter（job=>locationFilter.includes（job.location））；
}
把这个还给我，乔布斯
}
}
});

临时雇员
烫发
英国
威尔士
苏格兰

{{job.name}{{job.position}{{job.location}

我相信这段代码可以这样缩短：

计算：
{
//使用OR组合过滤器
filteredJobs（）
{
const positionFilter=this.positionFilter
const locationFilter=this.locationFilter
返回位置Filter.length+位置Filter.length>0
？this.jobs.filter（job=>positionFilter.includes（job.position）| | locationFilter.includes（job.location））
：这是我的工作；
},
//使用AND组合滤波器
filteredJobs（）
{
常量筛选器={}
如果（this.positionFilter.length>0）filter.position=this.positionFilter
如果（this.locationFilter.length>0）filter.location=this.locationFilter
const list=Object.entries（过滤器）；
return list.length>0
？this.jobs.filter（作业=>list.every（[key，options]）=>options.includes（作业[key]））
：这是我的工作；
}
}

只有在任何类别中至少有一个筛选器时，才会筛选作业。在这种情况下，您将只请求满足至少一个筛选器的作业。
这可能更适合于如果您选择了
temp
/
perm
，则位置复选框不起作用，我没有遵循-您能解释一下吗？如果您选择了
temp
或
perm
，位置过滤器不能正常工作该函数使用或组合过滤器，但可以很容易地更改为使用和组合过滤器。然后过滤器不能单独工作，只能组合使用