greenerr greenerr - 9 days ago 11
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>
</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.

M U M U
Answer

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!