Vue.js multiple filters

Question

I am trying to filter some content rendered with Vue.js , but only the first filter is working, the size filter.

var vm = new Vue({
    el: "#full_area",
    data: {
        projects: <?php print json_encode($postsa);?>,
        selectedSize: "All",
        selectedPlatform: "All"
    },
    computed: {
        filteredProjects: function () {
            var vm = this;
            var size = vm.selectedSize;
            var platform = vm.selectedPlatform;

            if (size === "All") {
                return vm.projects;
            } else if (size != "All") {
                return vm.projects.filter(function (project) {
                    return project.size === size;
                });
            }
            if (platform === "All") {
                return vm.projects;
            } else if (platform != "All") {
                return vm.projects.filter(function (project) {
                    return project.platform === platform;
                });
            }


        }
    }
});


        <div class="filter">

            <select name="selectedSize" v-model="selectedSize">
                <option value="All">Website Size</option>
                <option>1 Page</option>
       ...
                <option>10+ Page</option>
            </select>
        </div>
        <div class="filter">

            <select name="selectedPlatform" v-model="selectedPlatform">
                <option value="All">CMS Platform</option>
                <option>Wordpress</option>
        .....
            </select>
        </div>

I have tried several thing playing with the if`s and else, but no luck. Have any idea ?

Thanks.

You are return-ing. Which ends the execution of the function. If you want to return the result of multiple filters, you have to hold the results of the previous filter in the result, filter by all subsequent filters and at the end return the final result. — tao
– tao, Commented Mar 7, 2019 at 18:51

tao · Accepted Answer · 2019-03-07 19:02:08Z

1

A less verbose way of doing it:

    computed: {
        filteredProjects: function () {
            const size = this.selectedSize,
              platform = this.selectedPlatform;
            return this.projects
              .filter(p => size === 'All' || p.size === size)
              .filter(p => platform === 'All' || p.platform === platform)
        }
    }

edited Mar 7, 2019 at 19:02

answered Mar 7, 2019 at 18:57

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ebbishop · Accepted Answer · 2019-03-07 18:52:04Z

You need to filter by size first, and then platform. In your current code, the return statements handling the filter by size functionality make the code after it unreachable.

Try something like this:

    filteredProjects: function () {
        var vm = this;
        var size = vm.selectedSize;
        var platform = vm.selectedPlatform;
        var filteredProjects;

        // first, filter by size, saving the results to
        // the variable filteredProjects
        if (size === "All") {
            filteredProjects = vm.projects;
        } else {
            filteredProjects = vm.projects.filter(function (project) {
                return project.size === size;
            });
        }

        // then, continue filtering `filteredProjects`, using the platform
        if (platform === "All") {
            filteredProjects = filteredProjects;
        } else {
            filteredProjects = filteredProjects.filter(function (project) {
                return project.platform === platform;
            });
        }
        return filteredProjects

    }

I also change the else if statements to be simply else. Variables can either be equal to All or not - no need to spell out the alternative explicitly.

Collectives™ on Stack Overflow

Vue.js multiple filters

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related