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.

What does the data you're fetching look like?

Roy J
– Roy J

2017-05-22 21:33:34 +00:00
Commented May 22, 2017 at 21:33 — Roy J
– Roy J, Commented May 22, 2017 at 21:33

Roy J · Accepted Answer · 2017-05-22 21:54:59Z

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>

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: '[email protected]',
          status: '1'
        },
        {
          id: 2,
          name: 'two',
          email: '[email protected]',
          status: '0'
        },
        {
          id: 5,
          name: 'five',
          email: '[email protected]',
          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>

Don't you have to change if this values are set in the form first? He could use one or multiple combinations of the values to filter on.

Collectives™ on Stack Overflow

Rendering multiple filter on table in Vue Js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related