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);
    }
}

TESTDATA

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));
}

Vuejs使用多个复选框过滤器计算属性

1 个答案: