eddieace
20
1
Vue

Computed property with multiple checkbox filters

Posted 9 months 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.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.