how to add filters and search in tables in vuejs? - filter

Question

I am learning vue js and building a SPA i want to know how do I add filters and search using an input tag. I also want to add a feature that when i click on a particular name on the table it should open the profile of that person also a select all functionality
<template>
<div class="animated fadeIn">
<input type="text" placeholder="Enter Name" v-model="searchText">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>College Name</th>
<th>College City</th>
<th>Level Name</th>
<th>Submitted</th>
<th>Pending</th>
<th>Completed</th>
<th>Approved</th>
<th>Rejected</th>
</tr>
</thead>
<tbody>
<tr v-for="profile in profilesdata">
<td>{{profile.first_name}}</td>
<td>{{profile.college_name}}</td>
<td>{{profile.college_city}}</td>
<td>{{profile.level_name}}</td>
<td>{{profile.submitted}}</td>
<td>{{profile.pending}}</td>
<td>{{profile.complete}}</td>
<td>{{profile.approve}}</td>
<td>{{profile.rejected}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default{
name: 'profiles',
data () {
return{
profilesdata: []
}
},
created:function(){
this.loadlike()
},
methods:{
loadlike:function(){
this.$http.get('/api/profiles').then(function (res) {
this.profilesdata = res.body
console.log(53+this.profiles)
})}}}
</script>

Answer 1

you could probably return computed list instead of profilesData
<template>
...
<input type="text" placeholder="Enter Name" v-model="searchText">
...
<tr v-for="profile in computedProfilesData">
...
</template>
<script>
export default{
...
data () {
return {
...
// - you need info for searchText
searchText: ''
}
}
...
computed: {
computedProfilesData(){
let searchString = this.searchText;
return this.profilesdata.filter((profile) => {
// example
profile.first_name.indexOf(searchString) !== -1;
})
}
}
</script>
there is a lot of different ways to do this, this is just one of them.
you can pass that searchString to API and return result list, it all comes to that
what do you really need.

Answer 2

You can make a computed for the filtered data:
computed: {
filteredProfiles() {
return this.profilesdata.filter(profile => {
// TODO filter profile with this.searchText
})
}
}
And then change the v-for to loop over the filtered data: <tr v-for="profile in filteredProfiles">