[Vuejs]-Creating Vue Search Bar | How to hide/show data based on input?

by

0👍

✅

You can change the people property in sidebar into a computed property, which will be calculated based on user’s input.

So change the sidebar code to

<div v-for="person in filteredPeople" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id" :style="calcRegColor(person)">
  <span v-if="person.table_name">{{person.first_name + ' ' + person.last_name + ' - ' + person.table_name}}</span>
  <span v-else>{{person.first_name + ' ' + person.last_name}}</span>
</div>

and add a computed property

computed: {
    filteredPeople () {
        // Logic to filter data
    } 
}

0👍

A foolish aproach that I use, without computed properties:

JS:

new Vue({
  el: '#app',
  data: {
    list: [],
    filteredList: []
  },
  mounted(){
    this.filteredList = this.list
  },
  methods: {
    filter(e){
      if(e.target.value === '') this.filteredList = this.list
      else {
        this.filteredList = []
        this.list.forEach(item=>{
          if(list.name.includes(e.target.value)) this.filteredList.push(item)
        })
      }
    }
  }
})

The "name" property of list object can be changed to whatever property you want to look for.

HTML:

<input @keyup="filter" id="search" type="search" required>

Leave a comment