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

Question

我正在努力尝试使用orderBy与vuejs 2.0上的filterBy,以及我发现的关于这个主题的所有研究,以及我问题底部的链接.

这是我的过滤器,它正在工作:

// 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>

我在文档中发现了我们如何使用这个OrderBy,并且在这个很长的对话中如何使用带有排序的过滤器接头,但我真的无法实现它......

这应该是这样的:

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

但仍然,或者它没有编译或它带有错误,例如:

未定义的属性(这是我在其他方法中使用的定义) 未找到的函数方法(在注释我的方法排序时发生..也许这里是我遗漏的东西)

谢谢你的帮助!

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>