vue.js - 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`s 和 else 玩几件事，但没有运气。有什么想法吗？

谢谢。

标签： vue.jsvuejs2

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