Home » vue » Search filter for data displayed using cards vue

Search filter for data displayed using cards vue

Posted by: admin November 26, 2021 Leave a comment

Questions:

Im using cards to display data from database and i want to implement a search filter to filter the data based on whatever the user type. I’m not sure how to do it so i just followed some of the tutorials from W3school. The code doesn’t work. So far this is what i have done:

Here's the image

Vue Component

<table class="table col-md-12" style="background-color:white;">
<thead class="thead white" style="background-color:#3F51B5">
    <th>Unassigned
        <input class="form-control w-50 float-right" type="text" id="myInput">
    </th>
</thead>
<tbody>
    <div class="card col-md-11 mt-3 mx-auto" v-for="(uStudent,index) in uStudents" v-bind:key="uStudent.student_id"  id="myList">
        <div class="card-body">
            <div class="row">
            <h6 class="card-subtitle text-muted col-md-1 my-auto">#{{index+1}}</h6>
            <h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.student_id}}</h6>
            <h6 class="card-subtitle text-muted col-md-6 my-auto">{{uStudent.student_name}}</h6>
            <h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.company_state}}</h6>
            <a href="" class="col-md-1" @click="setLectureFK(uStudent.student_id)"><i class="fas fa-user-plus"></i></a>
            </div>  
        </div>
    </div>                                                
</tbody>

SCRIPT

<script>
export default {
    data () {
        return {
        uStudents:[],
        }
    },
    methods:{
        getUnassignedStudents(){
             axios.get(`/api/internship/unassignedStudents/${this.$route.params.id}`).then(response => this.uStudents = response.data);               
        },
        filter(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myList").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
        }
    },
    mounted() {
        this.filter();
        console.log('Component mounted.')
    }
}

Answers:

Vue has eventlisteners you can use directly in the DOM.
So instead of creating a function “filter” and running that on mounted, you can use a v-model attribute on the input field to real-time bind the user-provided value to a variable like this.filter

You can with that variable create a computed function that returns the filtered data. You can then change out “uStudents” with the computed function and use that in the v-for.

I will provide an example below

EDIT: Chaining filter is suitable some times but I figured in this example, it is better to write the whole logic inside the callback function of the filter.

So instead of the default

this.uStudents.filter(user => user.student_name.toUpperCase().includes(this.filter.toUpperCase()))

See the code example below how you can achieve multiple filter conditions in one filter.

new Vue({
  el: '#app',
  data() {
    return {
      uStudents: [
        {student_id: 1, student_name: 'Alex', company_state: 'Ohio'},
        {student_id: 2, student_name: 'Jane', company_state: 'Alabama'},
      ],
      filter: ''
    }
  },
  computed: {
    filteredStudents() {
      return this.uStudents.filter(user => {
        const filter = this.filter.toUpperCase();
        const hasIdMatch = String(user.student_id).includes(filter);
        const hasNameMatch = user.student_name.toUpperCase().includes(filter);
        
        return hasIdMatch || hasNameMatch;
      })
    }
  },
  methods: {
    getUnassignedStudents() {
      axios.get(`/api/internship/unassignedStudents/${this.$route.params.id}`).then(response => this.uStudents = response.data);
    },
  },
  mounted() {
    console.log('Component mounted.')
  }
})
.row {
  display: flex;
  justify-content: space-between;
  max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="table col-md-12" style="background-color:white;">
  <thead class="thead white" style="background-color:#3F51B5">
    <th>Unassigned
      <input class="form-control w-50 float-right" type="text" id="myInput" v-model="filter">
    </th>
  </thead>
  <tbody>
    <div class="card col-md-11 mt-3 mx-auto" v-for="(uStudent,index) in filteredStudents" v-bind:key="uStudent.student_id" id="myList">
      <div class="card-body">
        <div class="row">
          <h6 class="card-subtitle text-muted col-md-1 my-auto">#{{index+1}}</h6>
          <h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.student_id}}</h6>
          <h6 class="card-subtitle text-muted col-md-6 my-auto">{{uStudent.student_name}}</h6>
          <h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.company_state}}</h6>
          <a href="" class="col-md-1" @click="setLectureFK(uStudent.student_id)"><i class="fas fa-user-plus"></i></a>
        </div>
      </div>
    </div>
  </tbody>
  </table>
  </div>

###

There is actually a good tutorial in the Vue.js documentation, you just need to replace this modulo operator with your string comparison.

In addition to that, you could use the two-way binding of your search field.

export default {
  data () {
    return {
      uStudents:[],
      filterValue: ''
    }
  },
  computed: {
    filteredStudents: function () {
      return this.uStudents.filter(function (value) {
        return /* your comparison function using this.filterValue */
      })
    },
  methods:{
    /* your axios call */
  }
}

After that, replace your v-for with v-for="(uStudent,index) in filteredStudents and change your filter input to

<input class="form-control w-50 float-right" type="text" id="myInput" v-model="filterValue">