CODEWITHSUNDEEP
filterpaginationvue.js
Kushagra Agarwal
Kushagra Agarwal

Reputation: 1725

how to add filters and search in tables in vuejs?

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>

Upvotes: 0

Views: 1077

Answers (2)

remmargorp
remmargorp

Reputation: 29

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.

Upvotes: 3

sroes
sroes

Reputation: 15053

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">

Upvotes: 0

Related Questions