0
所以這裏是我的問題,我想使用Vue.js應用三個過濾器應用縮略圖(我從來沒有使用過這個框架)。它適用於第一個過濾器,但我不知道如何繼續進行其他過濾。目標是能夠從每個類別(平臺,活動領域和設備)中僅挑選一個複選框。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;
});
}
}
}
});