Vue.js несколько фильтров

Question

Я пытаюсь отфильтровать некоторый контент, отображаемый с помощью Vue.js, но работает только первый фильтр, фильтр размера.

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>

Я пробовал несколько вещей, играя с if и другими, но не повезло.Есть идеи?

Спасибо.

Answer 1

Менее многословный способ сделать это:

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

Answer 2

Сначала нужно отфильтровать по размеру, а затем по платформе. В вашем текущем коде операторы return, обрабатывающие функцию фильтра по размеру, делают код после того, как он недоступен.

Попробуйте что-то вроде этого:

    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

    }

Я также изменяю операторы else if на просто else. Переменные могут быть равны All или нет - нет необходимости явно указывать альтернативу.