VueJs 2 - Using Multiple Custom Filters

Question

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.

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
– str, Commented Nov 29, 2016 at 7:40
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
– greenerr, Commented Nov 29, 2016 at 13:06
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
– Joël, Commented Apr 16, 2018 at 9:10

Marek Urbanowicz · Accepted Answer · 2016-11-29 21:06:56Z

1

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!

edited Nov 29, 2016 at 21:06

answered Nov 29, 2016 at 8:04

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

greenerr Over a year ago

Thanks, to be clear, I am using a computed property. The tableFilter computed property in my above code is where I try to chain my 2 functions (findBy and orderBy). I guess my problem is I don't know how to properly combine the 2 functions.

Marek Urbanowicz Over a year ago

Ah, yes. Can you create JSBin/Fiddle for that? I will then try to help

greenerr Over a year ago

Ok, this took longer than it should have because my actual app uses single file components. Here is a fiddle with working search, and here is one with working sort when clicking on table headers. So I'm looking chain these two functions someonw. Obviously, the way I tried in my original post doesn't work.

Marek Urbanowicz Over a year ago

Let's start from the begining. First of all - you have misstype in sortOrders. Keep camelCase always. That's first to fix.

greenerr Over a year ago

You got it, thanks. I swear I tried that solution at some point, but I must have done something wrong. Also, in case anyone else is wondering why sorting the first column doesn't work, I just needed to replace this line in the orderBy function: return order * (a[column] - b[column]) with this: return order * (a[column] < b[column])

Collectives™ on Stack Overflow

VueJs 2 - Using Multiple Custom Filters

Relevant template section:

Relevant script sections:

Edit

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Relevant template section:

Relevant script sections:

Edit

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related