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

而不是在每一個階段努力return，先從result變量是副本你realisations，並在每個階段修改它，然後在最後返回它：

 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;