greenerr greenerr - 1 year ago 410
Javascript Question

VueJs 2 - Using Multiple Custom Filters

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>

Relevant script sections:

import { mapGetters } from 'vuex'
import db from './db'

export default {
firebase: {
sections: db.ref('HE'),
columns: db.ref('Columns')
computed: {
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)

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

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

Any help would be appreciated. Thanks


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.

Answer Source

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

check code in JSFiddle

Hope it helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download