修改

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

问题在于tableFilter计算属性。我不知道如何正确链接2 findBy和orderBy函数。当我单独调用它们时，每个过滤器都可以自行运行。

任何帮助将不胜感激。感谢

修改

作为参考，我创建了这些小提琴。一些Here is a fiddle带有工作搜索（搜索只搜索第一列，它区分大小写），here is one点击表头时有工作排序（尽管按第一列排序对某些人不起作用）原因）。

Here is a fiddle我尝试将2个函数链接起来。我似乎无法让它运行。

Answer 1

修正了它。质量错过拼写错误和其他一些小东西。排序数字，当然不是排序字符串。

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

希望它有所帮助！

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

相关模板部分：

相关脚本部分：

修改

1 个答案: