[Vuejs]-Why is the checkbox filtering not working in VueJS?

by

0👍

Edited your codepen as discussed on comments above.
1. moved from “string” selectedCategory to “array”
2. changed filtering to work for array 

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 },
		],
		selectedCategories: ["All"]
	},
	computed: {
		filteredClubs: function() {
			if (this.selectedCategories.includes('All')) {
				return this.clubs;
			} else {
        return this.clubs.filter(club => {
          return this.selectedCategories.some(category => club[category])
        })
			}
		}
	}
});
.container {
	padding: 20px;
	width: 90%;
	max-width: 400px;
	margin: 0 auto;
}

label {
	display: block;
	line-height: 1.5em;
}

ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

li {
	padding: 8px 16px;
	border-bottom: 1px solid #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container" id="clubs">
	<div class="filter">
		<label><input type="checkbox" v-model="selectedCategories" value="All" /> All</label>
		<label><input type="checkbox" v-model="selectedCategories" value="clubParking" /> Parking</label>
		<label><input type="checkbox" v-model="selectedCategories" value="clubToilets" /> Toilets</label>
		<label><input type="checkbox" v-model="selectedCategories" value="clubFloodlights" /> Floodlights</label>
	</div>
	
	<ul class="clubs-list">
		<li v-for="club in filteredClubs">{{ club.clubName }}</li>
	</ul>
</div>

Leave a comment