title: Vue.js : how to filter a table with a custom filter
body: <p>Table has two columns <code>Name</code>, <code>Age</code>. Searching works by name. As you type the name of user the table will trim down to the specific user name. </p>
  
  <p>But I want it to be filtered by age using a comparison operator <code>&lt;</code> or <code>&gt;</code>.</p>
  
  <p><a href="https://codepen.io/anon/pen/PERgxa" rel="noreferrer">Code pen link</a></p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div id="demo" class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        &lt;input v-model="search" class="form-control" placeholder="Username to search"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-1"&gt;
        &lt;select class="form-control" v-model="searchOperator"&gt;
          &lt;option value="&gt;"&gt;&gt;&lt;/option&gt;
          &lt;option value="&lt;"&gt;&lt;&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-md-5"&gt;
        &lt;input v-model="searchName" class="form-control" placeholder="Age"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;table class="table table-striped"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th v-repeat="column: columns"&gt;
            &lt;a href="#" v-on="click: sortBy(column)" v-class="active: sortKey == column"&gt;
              {{ column | capitalize }}
            &lt;/a&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
        &lt;tr v-repeat="users | filterBy search | orderBy sortKey reverse"&gt;
          &lt;td&gt;{{ name }}&lt;/td&gt;
          &lt;td&gt;{{ age }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Vue :</strong> </p>
  
  <pre><code>new Vue({
    el: '#demo',
  
    data: {
      sortKey: 'name',
  
      reverse: false,
  
      searchName: '',
  
      searchOperator: '',
  
      searchAge: '',
  
      columns: ['name', 'age'],
  
      newUser: {},
  
      users: [
        { name: 'John', age: 50 },
        { name: 'Jane', age: 22 },
        { name: 'Paul', age: 34 }
      ]
    },
  
    methods: {
      sortBy: function(sortKey) {
        this.reverse = (this.sortKey == sortKey) ? ! this.reverse : false;
  
        this.sortKey = sortKey;
      }
    }
  });
  </code></pre>
  
  <p>What is the best approach to achieve this? I tried but nothing seem to be working. </p>