title: Search multiple fields in a table in Vue.js with different v-model
body: <p>I am new to vue.js. I was trying to filter the table columns using multiple search fields. I have different search fields and their respective v-models for different columns in the table. I want to enable search for each column</p>
  
  <p>I tried the following solutions:
  1. <a href="https://stackoverflow.com/questions/31157913/vue-js-filterby-to-search-in-multiple-fields">Vue.js filterBy to search in multiple fields</a>
  2. <a href="https://stackoverflow.com/questions/47573098/how-do-i-search-through-multiple-fields-in-vue-js-2">How do I search through multiple fields in Vue.js 2</a></p>
  
  <p>Using the above two solutions I came up with this:
        </p>
  
  <pre><code>&lt;p&gt;
    &lt;label&gt;First Name&lt;/label&gt;
    &lt;input  type="text" placeholder="Enter firstname" v-model="First" /&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;label&gt;Last Name&lt;/label&gt;
    &lt;input type="text" placeholder="Enter the last Name" v-model="Last" /&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;label&gt;CustomerId&lt;/label&gt;
    &lt;input type="text" placeholder="Enter the CustomerId" v-model="CustomerId" /&gt;
  &lt;/p&gt;
  
  
  &lt;table id="clients"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th width="40%"&gt;First Name&lt;/th&gt;
        &lt;th width="20%"&gt;Last Name&lt;/th&gt;
        &lt;th width="20%"&gt;CustomerId&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody v-for="customer in filteredCustomers.slice(0,20)"&gt;
  
      &lt;tr&gt;
        &lt;td&gt;{{customer.first}}&lt;/td&gt;
        &lt;td&gt;{{customer.last}}&lt;/td&gt;
        &lt;td&gt;{{customer.id}}&lt;/td&gt;
  
      &lt;/tr&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>Script:</p>
  
  <pre><code>export default {
  props:['showMod'],
  
  data() {
  
  return {
    id: '',
    First: '',
    Last: '',
    CustomerId: '',
    categories: []
  }
  },
  
  computed: {
  
    filteredCustomers: function () {
      var self = this;
      return this.categories.filter(function (cust) {
        return cust.first.toLowerCase().indexOf(self.First.toLowerCase()) &gt;-1 || cust.last.toLowerCase().indexOf(self.Last.toLowerCase()) &gt;-1
    });
    }
  </code></pre>
  
  <p>I change the code to enable search on only one field, it works but stops working when trying to search on multiple fields. 
  I don't know what I am doing wrong in this.</p>
  
  <p>Edit:
  I was able to get those search working independently by adding "if"</p>
  
  <pre><code>  filteredCustomers: function () {
      var self = this;
      return this.categories.filter(function (cust) {
     if (self.First) {
        return cust.first.toLowerCase().indexOf(self.First.toLowerCase()) &gt; -1
     }
      if (self.CustomerId) {
         return cust.clientId.toLowerCase().indexOf(self.CustomerId.toLowerCase()) &gt; -1 
     }
  
     return cust.last.toLowerCase().indexOf(self.Last.toLowerCase())&gt;-1 
    });
  </code></pre>
  
  <p>Hoewever, I could not get two filter conditions working at the same time like first search based on first name and then search on last name.</p>