具有多个复选框过滤器的 Vuejs 计算属性

Question

我正在尝试使用尽可能简单且尽可能易读的复选框来制作过滤结果的解决方案。

我有一个名为filteredPositions 的计算属性，看起来像这样。但它不适用于一个阵列上的多个过滤器。有人对这个问题有好的解决方案吗？

这是计算的属性。

filteredPositions() {
    if (this.checkedFilters.includes("SE")) {
        return this.positions.filter(position => position.country_id == 1);
    }
    if (this.checkedFilters.includes("US")) {
        return this.positions.filter(position => position.country_id == 2);
    }
}

测试数据

data() {
    return {
        positions: [],
        filters: [
            {
                name: 'SE',
            },
            {
                name: 'US',
            }
        ],
        checkedFilters: ['SE', 'US'],
    }
},

这是一个 JsFiddle
https://jsfiddle.net/0dzvcf4d/9657/

Answer 1

您的 filteredPositions 仅过滤一个位置，因为 if 中的返回（它不会到达另一个位置）。您需要检查您选择的过滤器是否包含当前职位的名称。

https://jsfiddle.net/0dzvcf4d/9712/

filteredPositions () {
  return this.positions.filter(position => this.checkedFilters.includes(position.name));
}