Rendering multiple filter on table in Vue Js

Question

I'm trying to build a table filters in Vuejs which filters the table as per the requirement, I've got two separate input fields which filters one common table I've my table code something like this:

<div class="col-sm-4">
    <div class="form-group">
        <label class="control-label">Search by company name</label>
        <input type="text" v-model="search_by_name" placeholder="Search by company name" class="form-control">
    </div>
</div>
<div class="col-sm-2">
    <div class="form-group">
        <label class="control-label">Search by email</label>
        <input type="text" v-model="search_by_email" placeholder="Search by email" class="form-control">
    </div>
</div>
<div class="col-sm-3">
    <div class="form-group">
        <label class="control-label" for="tags">Search by tags</label>
        <select name="status" id="tags" class="form-control">
            <option value="1" selected="">Completed</option>
            <option value="0">Pending</option>
        </select>
    </div>
</div>
<div class="table-responsive">
    <table class="table table-striped">
        <tbody>
            <tr v-for="item in tableFilter">
               <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.city }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.email }}</td>
                <td><router-link :to="{name: 'company-update', params: {id: item.id}}"><i class="fa fa-pencil-square-o text-navy"></i></router-link></td>
                <td><a @click.prevent="deleteCompany(item.id)"><i class="fa fa-trash-o text-navy"></i></a></td>
            </tr>
        </tbody>
    </table>
</div>

For filtering I'm having following in my vue instance:

export default {
data(){
    return {
        search_by_name: '',
        search_by_email: '',
        model: {},
        columns: {},
        }
    },
props: ['source'],
created() {
        this.fetchIndexData()
    },
methods: {
    fetchIndexData() {
            axios.get('/companies').then(response => {
                Vue.set(vm.$data, 'model', response.data.model)
                Vue.set(vm.$data, 'columns', response.data.columns)
            }).catch(response => {
//                console.log(response)
            })
        },
    findBy: function(list, value, column) {
            return list.filter(function(item) {
                return item[column].includes(value)
            })
        }
    },
computed: {
        tableFilter: function () {
            if(this.model.data)
            {
                return this.findBy(this.model.data, this.search_by_name, 'name')
            }
        }
    }
}

Currently name search is working properly as required, I want to bind this search with email search also like this.search_by_email or by drop-down as mentioned in the html section.

Answer 1

1. You need to model a value in your select

     <select name="status" id="tags" class="form-control" v-model="pending_or_completed">
         <option value="1">Completed</option>
         <option value="0">Pending</option>
     </select>
   

2. You need your computed to test for all conditions

   tableFilter() {
     if (this.model.data) {
       return this.model.data.filter((item) => 
         item.name.includes(this.search_by_name)
         && item.email.includes(this.search_by_email)
         && item.status === this.pending_or_completed);
     }
   }
   

new Vue({
  el: '#app',
  data: {
    search_by_name: 'name',
    search_by_email: '',
    pending_or_completed: '1',
    model: {
      data: [{
          id: 1,
          name: 'one',
          email: 'foo@one.com',
          status: '1'
        },
        {
          id: 2,
          name: 'two',
          email: 'bar@two.com',
          status: '0'
        },
        {
          id: 5,
          name: 'five',
          email: 'the@five.edu',
          status: '0'
        }
      ]
    }
  },
  computed: {
    tableFilter() {
      if (this.model.data) {
        return this.model.data.filter((item) => item.name.includes(this.search_by_name) && item.email.includes(this.search_by_email) && item.status === this.pending_or_completed);
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <div class="col-sm-4">
    <div class="form-group">
      <label class="control-label">Search by company name</label>
      <input type="text" v-model="search_by_name" placeholder="Search by company name" class="form-control">
    </div>
  </div>
  <div class="col-sm-2">
    <div class="form-group">
      <label class="control-label">Search by email</label>
      <input type="text" v-model="search_by_email" placeholder="Search by email" class="form-control">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <label class="control-label" for="tags">Search by tags</label>
      <select name="status" id="tags" class="form-control" v-model="pending_or_completed">
          <option value="1">Completed</option>
          <option value="0">Pending</option>
      </select>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-striped">
      <tbody>
        <tr v-for="item in tableFilter">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.city }}</td>
          <td>{{ item.number }}</td>
          <td>{{ item.email }}</td>
          <td>
            <router-link :to="{name: 'company-update', params: {id: item.id}}"><i class="fa fa-pencil-square-o text-navy"></i></router-link>
          </td>
          <td><a @click.prevent="deleteCompany(item.id)"><i class="fa fa-trash-o text-navy"></i></a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>