Menu
In vue.js how can you filter a table using mutiple filters that target a specific column on the table.
For example if I have two search fields name and age how can I bind them to search the respective columns on the table below. So if user enters a name in the name input it should only search for a name on the name column. If the user enters an age as well then it should form an and condition and search for an age in the age column. Currently the filters simply search the entire table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Vast World of Vue.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body id="demo" class="container">
<input v-model="name" class="form-control" placeholder="search by name"><br>
<input v-model="age" class="form-control" placeholder="search by age">
<table class="table table-striped">
<thead>
<tr>
<th >
Name
</th>
<th >
Age
</th>
</thead>
<tbody>
<tr v-for="item in people | filterBy name | filterBy age">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<script src="http://vuejs.org/js/vue.js"></script>
<script>
new Vue({
el: '#demo',
name: '',
age: '',
data: {
people: [
{ name: 'John', age: 50 },
{ name: 'Jane', age: 22 },
{ name: 'Paul', age: 34 },
{ name: 'Kate', age: 15 },
]
}
});
</script>
</body>
</html>
454
Since we don't have filters anymore, you'd need to use a computed property.
So you can do something like:
{
data: {
people: [{ name: }],
age: 28,
name: 'bi',
}
computed: {
filteredPeople () {
const { name, age, people } = this
return this.people
.filter(person => person.name.toLowerCase().indexOf(name.toLowerCase()) > -1)
.filter(person => person.age === age)
},
},
}
Then you'd loop through filteredPeople instead of people
<tr v-for="person in filteredPeople">...</tr>
If you take a look at the second example in API documentation for filterBy you'll see the ability to limit it to a field.
You'd want something like:
item in people | filterBy name in 'name' | filterBy age in 'age'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
