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

Question

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

我有两个过滤器单独工作，但当我尝试将它们组合在一起时，我遇到了问题。

相关模板部分:

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

相关脚本部分:

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 数据由我尝试循环和过滤的对象数组组成。

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

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

编辑

作为引用，我创建了这些 fiddle 。 Here is a fiddle使用有效搜索(搜索仅搜索第一列，并且区分大小写)，以及 here is one单击表格标题时使用工作排序(尽管由于某些原因无法按第一列排序)。

Here is a fiddle我尝试链接这两个函数的地方。我似乎无法让它运行。

Answer 1

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

检查 JSFiddle 中的代码 https://jsfiddle.net/62u2e4bj/

希望对您有所帮助!