Level 11
You should be able to check if the items.category is in the selected array if it is then show it if not then do not show it.
Jan 13, 2019
4
Level 5
vuejs filter with checkbox
Hi, i want to filter the certain products based on whether checkbox is clicked or not. i have three category, animal, fruit and clothes. if user checked only animal it should display animal on the page. if user clicked animal and fruit, it should filter only animals and fruits .But i don't know how to implement this.
index.html
<div id="app">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<label class="form-checkbox">
<h3>Choose the category</h3>
<input type="checkbox" value="animal" v-model="selected">animal
<input type="checkbox" value="fruit" v-model="selected">fruit
<input type="checkbox" value="clothes" v-model="selected">clothes
</label>
</th>
<th>id</th>
<th>name</th>
<th>description</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr v-for="i in items">
<td>
<label class="form-checkbox">
<i class="form-icon"></i>
</label>
</td>
<td>{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.description}}</td>
<td>{{i.category}}</td>
</tr>
</tbody>
</table>
You have choosen:{{selected}}
</div>
<style>
body{
padding: 50px
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: () => ({
items: [
{
id: "1",
name: "apple",
description: "description about product",
category:'fruit'
},
{
id: "2",
name: "mango",
description: "description about product",
category:'fruit'
},
{
id: "3",
name: "shoes",
description: "description about product",
category:'footwear'
},
{
id: "4",
name: "shirt",
description: "description about product",
category:'clothes'
},
{
id: "5",
name: "dog",
description: "description about product",
category:'animal'
},
{
id: "6",
name: "cat",
description: "description about product",
category:'animal'
}
],
selected: [],
}),
computed: {
displayChoosen(){
}
}
});
</script>
Level 5
i tried in this way but still not any output computed: { displayChoosen(){
for( i=0; i<this.items.length; i++){
//console.log(this.items[i]);
if(this.items[i].name==this.selected){
return this.items[i]
}
}
}
}
Level 40
There is some helpful detail in the VueJS guide for dealing with Filtering, as you want to do:
https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results
I have a working example here that you should be able to directly apply to your table variation:
<template>
<div class="container">
<div class="row">
<div class="col">
<div v-for="cat in categoryList">
<input type="checkbox" :id="cat" :value="cat" v-model="categories">
<label :for="cat">{{cat}}</label>
</div>
<br>
<span>You have chosen: {{ categories }}</span>
</div>
<div class="col">
<strong>Items in chosen category(s)</strong>
<ul>
<li v-for="item in selectedItems"> category: {{item.category}} | name: {{item.name}}</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Checkbox',
data() {
return {
categoryList: ['animal', 'fruit', 'clothes'],
categories: [],
items: [
{ id: '1', name: 'apple', description: 'description about product', category: 'fruit', },
{ id: '2', name: 'mango', description: 'description about product', category: 'fruit', },
{ id: '3', name: 'shoes', description: 'description about product', category: 'footwear', },
{ id: '4', name: 'shirt', description: 'description about product', category: 'clothes', },
{ id: '5', name: 'dog', description: 'description about product', category: 'animal', },
{ id: '6', name: 'cat', description: 'description about product', category: 'animal', },
],
};
},
computed: {
selectedItems: function () {
let cats = this.categories;
return this.items.filter(function (item) {
return -1 !== _.indexOf(cats, item.category);
});
},
},
};
</script>
Here is a version of the computed filter, without using Lodash:
computed: {
selectedItems: function () {
return this.items.filter(function (item) {
return this.categories.includes(item.category);
}, this);
},
},
I guess it's a little cleaner.
Level 5
@burlresearch Thank you very much
Please or to participate in this conversation.