VueJs 2 - Using Multiple Custom Filters

3
votes

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.

I have both filters working separately, but when I try to combine them together I'm running into issues.

Relevant template section:

<tr class="vu-row" v-for="item in tableFilter">
  <td v-for="head in columns">{{item[head[".key"]]}}</td>
</tr>

Relevant script sections:

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)
}

The sections data consists of an array of objects that I'm trying to loop through and filter.

The issue is with the tableFilter computed property. I don't know how to properly chain the 2 findBy and orderBy functions. Each filter works on its own when I call them individually.

Any help would be appreciated. Thanks

Edit

For reference I created these fiddles. Here is a fiddle with working search (search only searches the first column, and it is case sensitive), and here is one with working sort when clicking on table headers (although sorting by the first column isn't working for some reason).

Here is a fiddle where I try to chain the 2 functions. I can't seem to get it to run.

1
javascriptvue.jsvuejs2
How did you try to chain them? - str
Also note that "[...] filters are primarily designed for text transformation purposes. For more complex data transforms in other directives, you should use Computed properties instead." (Source) - str
Sorry, I should have been more clear - I am using a computed property. The tableFilter computed property in my above code is where I try to chain my 2 methods (findBy and orderBy) - greenerr
Hi! Thanks for explanations and illustration. However, considering such functions have been deprecated, did you find what the devs now consider as the way to do such functions, using v-for only? - Joël

1 Answers

1
votes

Fixed it. The mass miss typo and some other small stuff. Sorting numbers, of course not sorting strings.

check code in JSFiddle https://jsfiddle.net/62u2e4bj/

Hope it helps!