Search a list while typing in textbox VueJS 2

Question

I have a list of users from an array. And I want to filter them based on the search box(name) at the top. I saw that there are filters in VueJS 1. But not available in VuesJS 2.

Answer 1

I like the answer by Nathan but I think this would work better and it eliminates the need for the var self = this assignment. It will also keep eslint happy as the Vue eslint plugin frowns upon using indexOf when looking for existence. Here it is:

data: function () {
      return{
        search: '',
        customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
        ]
},
computed:
{
    filteredCustomers () {
      return this.customers.filter((customer) => {
        return customer.name.toLowerCase().includes(this.search.toLowerCase())
      })
    }
}