title: VueJs 2 - Using Multiple Custom Filters
body: <p>Vuejs 2.0 deprecated the built in filters (filterby, orderby, limitby) when using v-for. I'm trying to recreate the functionality of the filterby and orderby filters.</p>
  
  <p>I have both filters working separately, but when I try to combine them together I'm running into issues.</p>
  
  <h2>Relevant template section:</h2>
  
  <pre><code>&lt;tr class="vu-row" v-for="item in tableFilter"&gt;
    &lt;td v-for="head in columns"&gt;{{item[head[".key"]]}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <h2>Relevant script sections:</h2>
  
  <pre><code>import { mapGetters } from 'vuex'
  import db from './db'
  
  export default {
    firebase: {
      sections: db.ref('HE'),
      columns: db.ref('Columns')
    },
    computed: {
      ...mapGetters({
        query: 'queryGet',
        sortkey: 'sortkeyGet',
        sortorders: 'sortOrdersGet'
      }),
      tableFilter: function () {
        return this.orderBy(function () {
          return this.findBy(this.sections, this.query, 'Designation')
        }, this.sortorders[this.sortkey], this.sortkey)
      }
    },
    methods: {
      findBy: function (list, value, column) {
        return list.filter(function (item) {
          return item[column].includes(value)
        })
      },
      orderBy: function (list, order, column) {
        return list.sort(function (a, b) {
          return order * (a[column] - b[column])
        })
      }
    },
  ........(more irrelevant code)
  }
  </code></pre>
  
  <p>The <code>sections</code> data consists of an array of objects that I'm trying to loop through and filter. </p>
  
  <p>The issue is with the <code>tableFilter</code> computed property. I don't know how to properly chain the 2 <code>findBy</code> and <code>orderBy</code> functions. Each filter works on its own when I call them individually.</p>
  
  <p>Any help would be appreciated. Thanks</p>
  
  <h1><strong>Edit</strong></h1>
  
  <p>For reference I created these fiddles. <a href="https://jsfiddle.net/greene48/c8er3kza/2/" rel="nofollow noreferrer">Here is a fiddle</a> with working search (search only searches the first column, and it is case sensitive), and <a href="https://jsfiddle.net/greene48/o8LL87bv/1/" rel="nofollow noreferrer">here is one</a> with working sort when clicking on table headers (although sorting by the first column isn't working for some reason).</p>
  
  <p><a href="https://jsfiddle.net/greene48/f8p52n04/1/" rel="nofollow noreferrer">Here is a fiddle</a> where I try to chain the 2 functions. I can't seem to get it to run.</p>