title: How do I search through multiple fields in Vue.js 2
body: <p>I am trying to search or filter through 3 fields <em>firstname, lastname</em> and <em>email</em> in my Vue.js 2 application. I understand that Vue 2 does not come with a built in filter method unlike in Vue 1, hence I created a custom method which is only able to filter through just one field. How do I extend this to multiple fields? I have tried something like this <code>filterBy(list, value1, value2, value3)</code> but it does not work.</p>
  
  <p>This is my code</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="customers container"&gt;
  &lt;input class="form-control" placeholder="Enter Last Name" v-
  model="filterInput"&gt;
  &lt;br /&gt;
  &lt;table class="table table-striped"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;First Name&lt;/th&gt;
        &lt;th&gt;Last Name&lt;/th&gt;
        &lt;th&gt;Email&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr v-for="customer in filterBy(customers, filterInput)"&gt;
        &lt;td&gt;{{customer.first_name}}&lt;/td&gt;
        &lt;td&gt;{{customer.last_name}}&lt;/td&gt;
        &lt;td&gt;{{customer.email}}&lt;/td&gt;
        &lt;td&gt;&lt;router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id"&gt;View&lt;/router-link&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
  name: 'customers',
  data () {
  return {
  
    customers: [],
    filterInput:'',
  
  }
  },
  
  methods: {
  fetchCustomers(){
    this.$http.get('http://slimapp.dev/api/customers')
      .then(function(response){
  
        this.customers = (response.body); 
      });
   },
  
   filterBy(list, value){
      value = value.charAt(0).toUpperCase() + value.slice(1);
      return list.filter(function(customer){
        return customer.last_name.indexOf(value) &gt; -1;
      });
    },
  
  
    },
  
    created: function(){
    if (this.$route.params.alert) {
    this.alert = $route.params.alert
    }
    this.fetchCustomers();
    },
  
    updated: function(){
    this.fetchCustomers();
    },
    components: {
  
    }
    }
    &lt;/script&gt;
  
    &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
    &lt;style scoped&gt;
  </code></pre>
  
  <p></p>