After spending a solid 8 hours attempting to make this work, I'm still struggling. My main goal is to display a loop that shows all items by default. Then, when a user selects a checkbox, it will filter out the items where they are set to false.
Here's my group of checkboxes and loop:
<div class="container" id="clubs">
<div class="filter">
<label><input type="checkbox" v-model="selectedCategory" value="All" /> All</label>
<label><input type="checkbox" v-model="selectedCategory" value="ClubParking" /> Parking</label>
<label><input type="checkbox" v-model="selectedCategory" value="ClubToilets" /> Toilets</label>
<label><input type="checkbox" v-model="selectedCategory" value="ClubFloodlights" /> Floodlights</label>
</div>
<ul class="clubs-list">
<li v-for="club in filteredClubs">{{ club.clubName }}</li>
</ul>
</div>
And here's the relevant code snippet from my application:
var vm = new Vue({
el: "#clubs",
data: {
clubs: [
{ clubName: "Club One", clubParking: true, clubToilets: false, clubFloodlights: true },
{ clubName: "Club Two", clubParking: true, clubToilets: false, clubFloodlights: false },
{ clubName: "Club Three", clubParking: false, clubToilets: true, clubFloodlights: true },
],
selectedCategory: "All"
},
computed: {
filteredClubs: function() {
var vm = this;
var category = vm.selectedCategory;
if(category === "All") {
return vm.clubs;
} else {
return vm.clubs.filter(function(club) {
return selectedFieldNames.every(fname=>club[fname])
const selectedFieldNames = selectedCategory.map(category=>{
switch(category){
case 'Toilets':
return 'clubToilets';
case 'Parking':
return 'clubParking';
case 'Floodlights':
return 'clubFloodlights';
}
})
});
}
}
}
});
If you want to see a live example, I've created a Codepen. Your assistance would be greatly appreciated as I've been cooped up at home all day trying to crack this problem.