javascript - Vue.JS 多个复选框系列来过滤应用程序

Question

所以这是我的问题，我想使用 Vue.js(我以前从未使用过该框架)将三个过滤器应用于应用程序缩略图。它适用于第一个过滤器，但我不知道如何处理其他过滤器。目标是能够从每个类别(平台、事件领域和设备)中只选择一个复选框。

Screenshot of what it should look like. ("Toutes" meaning "All")

这是 HTML

<div id="filter-realisations">
          <div id="filter">
            <div class="filter_container">
              <h3>Filtrer</h3>
              <div class="filter">
                <p>Plateforme</p>
                <input type="radio" v-model="selectedPlatform" value="AllPlatform" id="AllPlatform"><label for="AllPlatform">Toutes</label>
                <input type="radio" v-model="selectedPlatform" value="iOS" id="iOS" /><label for="iOS">iOS</label>
                <input type="radio" v-model="selectedPlatform" value="Android" id="Android" /><label for="Android">Android</label>
              </div>
              <div class="filter">
                <p>Secteur</p>
                <input type="radio" v-model="selectedSecteur" value="AllSecteur" id="AllSecteur" /><label for="AllSecteur">Toutes</label>
                <input type="radio" v-model="selectedSecteur" value="grandPublic" id="grandPublic"/><label for="grandPublic">Grand public</label>
                <input type="radio" v-model="selectedSecteur" value="metier" id="metier" /><label for="metier">Métier</label>
                <input type="radio" v-model="selectedSecteur" value="marchesPublics" id="marchesPublics" /><label for="marchesPublics">Marchés Publics</label>

              </div>
              <div class="filter">
                <p>Device</p>
                <input type="radio" v-model="selectedDevice" value="AllDevice" id="AllDevice" /><label for="AllDevice">Toutes</label>
                <input type="radio" v-model="selectedDevice" value="Smartphone" id="Smartphone" /><label for="Smartphone">Smartphone</label>
                <input type="radio" v-model="selectedDevice" value="Tablet" id="Tablet" /><label for="Tablet"> Tablette</label>
                <input type="radio" v-model="selectedDevice" value="Watch" id="Watch" /><label for="Watch"> Montre connectée</label>

              </div>
            </div>

          </div>

          <div id="realisations">
            <div class="realisations_container">
              <div class="realisations_bloc" v-for="app in filteredRealisations" v-bind:key="app">
                <img v-bind:src='"img/realisations/"+app.name+".jpg"' alt="app.name">
                <div class="overlay">
                  <div class="app_description"><p>{{app.name}}</p></div>
                  <div class="platform_container">
                     <div class="device">
                      <img v-bind:src='"img/"+app.device+".svg"' alt="app.device"/>
                    </div>
                    <div class="os">
                      <img v-bind:src='"img/"+app.platform+".svg"'alt="app.platform"/>
                    </div></div>
                </div>
              </div>

            </div>
          </div>
        </div>

这是脚本

var vm = new Vue({
    el:  "#filter-realisations",
    data: {
        realisations: [
            { name: "ASM", platform: "iOS", secteur: "grandPublic", secteur: "grandPublic", device:"Watch" },
            { name: "Biodiversea", platform: "Android", secteur: "marchesPublics", device:"Tablet" },
            { name: "CDBB", platform: "iOS", secteur: "grandPublic", device:"Smartphone" },
            { name: "Centre France", platform: "iOS", secteur: "grandPublic", device:"Watch" },
            { name: "Clermont", platform: "Android", secteur: "grandPublic", device:"Tablet" },
            { name: "Dassault", platform: "iOS", secteur: "metier", device:"Smartphone"},
            { name: "Journal", platform: "iOS", secteur: "metier", device:"Smartphone" },
            { name: "Somfy", platform: "Android", secteur: "metier", device:"Smartphone" },
            { name: "Sortir.vosges", platform: "Android", secteur: "metier", device:"Smartphone" },
      { name: "Sud Radio", platform: "Android", secteur: "metier", device:"Smartphone" },
      { name: "Verifrom", platform: "Android", secteur: "metier", device:"Smartphone" },
      { name: "Sports", platform: "iOS", secteur: "marchesPublics", device:"Watch" }

        ],
        selectedSecteur : "AllSecteur",
        selectedPlatform: "AllPlatform",
        selectedDevice : "AllDevice"
    },
    computed: {
        filteredRealisations: function() {
            var vm = this;
            var platform = vm.selectedPlatform;
            var secteur = vm.selectedSecteur;
            var device = vm.selectedDevice;



            if(platform === "AllPlatform") {
                return vm.realisations;
            } else {
                return vm.realisations.filter(function(app) {
                    return app.platform === platform;
                });
            }

            if(secteur === "AllSecteur") {
                return vm.realisations;
            } else {
                return vm.realisations.filter(function(app) {
                    return app.secteur === secteur;
                });
            }

            if(device === "AllDevice") {
                return vm.realisations;
            } else {
                return vm.realisations.filter(function(app) {
                    return app.device === device;
                });
            }

        }
    }
});

Answer 1

与其尝试在每个阶段返回，不如从一个result变量开始，它是您的实现的副本，并在每个阶段，然后在最后返回它:

       var result;

       if(platform === "AllPlatform") {
            result = vm.realisations;
        } else {
            result = vm.realisations.filter(function(app) {
                return app.platform === platform;
            });
        }

        if(secteur !== "AllSecteur") {
            result = result.filter(function(app) {
                return app.secteur === secteur;
            });
        }

        if(device !== "AllDevice") {
            result = result.filter(function(app) {
                return app.device === device;
            });
        }
        return result;