VueJs 2 - 使用多个自定义过滤器

Question

Vuejs 2.0 在使用 v-for 时弃用了内置过滤器（filterby、orderby、limitby）。我正在尝试重新创建 filterby 和 orderby 过滤器的功能。

我让两个过滤器分开工作，但是当我尝试将它们组合在一起时，我运行遇到了问题。

相关脚本部分：

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

sections 数据由一个 objects 数组组成，我正试图对其进行循环和过滤。

问题出在 tableFilter 计算的属性上。我不知道如何正确链接 2 个 findBy 和 orderBy 函数。当我单独调用它们时，每个过滤器都独立工作。

如有任何帮助，我们将不胜感激。谢谢

编辑

为了参考，我创建了这些小提琴。 Here is a fiddle with working search (search only searches the first column, and it is case sensitive), and here is one 单击 table headers 时排序正常（尽管由于某些原因无法按第一列排序）。

Here is a fiddle 我尝试链接这两个函数。我似乎无法达到运行。

Answer 1

已修复。大众错过了错别字和其他一些小东西。排序数字，当然不是排序字符串。

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

希望对您有所帮助！

VueJs 2 - 使用多个自定义过滤器

VueJs 2 - Using Multiple Custom Filters

javascript

vue.js

vuejs2

相关模板部分：

相关脚本部分：

编辑