Vuejs 2 在同一个计算属性中使用 filterBy 和 orderBy

Question

我很难在 vuejs 2.0 上尝试将 filterBy 与 orderBy 结合起来，截至 link 我发现了关于这个主题的所有研究在我的问题的底部。

这是我的过滤器，正在运行：

// computed() {...
filteredResults() {
    var self = this
    return self.results
        .filter(result => result.name.indexOf(self.filterName) !== -1)
}

组件中调用的方法：

// methods() {...
customFilter(ev, property, value) {
    ev.preventDefault()
    this.filterBook = value
}

组件中：

// Inside my component
<a href="#" @click="customFilter($event, 'name', 'Name..')">Name..</a>

还有另一个过滤器，同样有效：

// computed() {...
orderByResults: function() {
    return _.orderBy(this.results, this.sortProperty, this.sortDirection)
}

为了遵守我的订单，我有这个方法：

// methods() {...
sort(ev, property) {
    ev.preventDefault()
    if (this.sortDirection == 'asc' && this.sortProperty == property ) {
        this.sortDirection = 'desc'
    } else {
        this.sortDirection = 'asc'
    }
    this.sortProperty = property
}

为了称呼它，我有以下内容：

// Inside my component
<a href="#" @click="sort($event, 'name')">Name..</a>

我在docs how we use this OrderBy, and in this very long conversation中找到了如何使用filter联合sort，但我真的无法实现它...

应该是这样的：

filteredThings () {
    return this.things
      .filter(item => item.title.indexOf('foo') > -1)
      .sort((a, b) => a.bar > b.bar ? 1 : -1)
      .slice(0, 5)
  }

我无法完成这项工作...

我尝试了多种形式：

.sort((self.sortProperty, self.sortDirection) => this.sortDirection == 'asc' && this.sortProperty == property ? this.sortDirection = 'desc' : this.sortDirection = 'asc' )

但是还是不行，或者编译不通过或者报错，比如：

属性 not defined（这是定义，例如我在其他方法中使用它） 找不到函数的方法（在评论我的方法排序时发生。也许这就是我遗漏的东西）

感谢您的帮助！

Answer 1

您的方法的想法似乎是正确的，但如果没有完整的示例，则很难说出实际上可能是什么错误。

下面是排序和过滤相结合的简单示例。代码可以很容易地扩展，例如使用测试数据中的任意字段。根据从外部设置的参数，过滤和排序在同一个计算属性中完成。这是一个有效的 JSFiddle.

<div id="app">
    <div>{{filteredAndSortedData}}</div>
    <div>
        <input type="text" v-model="filterValue" placeholder="Filter">
        <button @click="invertSort()">Sort asc/desc</button>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                testData: [{name:'foo'}, {name:'bar'}, {name:'foobar'}, {name:'test'}],
                filterValue: '',
                sortAsc: true
            };
        },
        computed: {
            filteredAndSortedData() {
                // Apply filter first
                let result = this.testData;
                if (this.filterValue) {
                    result = result.filter(item => item.name.includes(this.filterValue));
                }
                // Sort the remaining values
                let ascDesc = this.sortAsc ? 1 : -1;
                return result.sort((a, b) => ascDesc * a.name.localeCompare(b.name));
            }
        },
        methods: {
            invertSort() {
                this.sortAsc = !this.sortAsc;
            }
        }
    });
</script>

Vuejs 2 在同一个计算属性中使用 filterBy 和 orderBy

Vuejs 2 using filterBy and orderBy in the same computed property

sorting

vuejs2

Vuejs 2 在同一个计算 属性 中使用 filterBy 和 orderBy

Vuejs 2 using filterBy and orderBy in the same computed property

sorting

vuejs2

Vuejs 2 在同一个计算属性中使用 filterBy 和 orderBy