eddieace
448
1
Vue

Computed property with multiple checkbox filters

Posted 1 year ago by eddieace

I am trying to make a solution for filtering results using checkboxes as simple as possible and as readable as possible.

I have a computed property called filteredPositions that looks like this. But it won't work with multiple filters on one array. Does anyone have a good solution for this problem?

Here is the computed property.

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'],
    }
},

Here is a jsFiddle https://jsfiddle.net/0dzvcf4d/9657/

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.