javascript - Vue.JS Multiple checkbox series to filter apps -

so here's problem, want apply 3 filters app thumbnails using vue.js (i never used framework before). works fine first filter don't know how proceed other ones. goal able pick 1 checkbox each category (platform, field of activity , device).

screenshot of should like. ("toutes" meaning "all")

here's 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> 

and here's script

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

instead of trying return @ each stage, start result variable copy of realisations, , modify @ each stage, return @ end:

       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;