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

时间:2016-11-14 00:22:44

标签: sorting vuejs2

我很难在 vuejs 2.0 上尝试将filterBy与orderBy联系起来,我已经找到了关于这个主题的所有研究,如我问题底部的链接所示。

这是我的过滤器,它正在运行:

// 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中找到了我们如何使用此OrderBy,并在this very long conversation中如何使用过滤器联合 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' )

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

属性未定义(这是我在其他方法中使用它的定义) 找不到函数的方法(当我的方法 sort 时,就会发生这种情况......也许这里是我遗漏的东西)

感谢您的帮助!

1 个答案:

答案 0 :(得分:6)

您的方法的想法似乎是有效的,但如果没有完整的例子,很难说出实际上可能存在的错误。

这是一个简单的排序和过滤组合示例。代码可以很容易地扩展,例如使用测试数据中的任意字段。基于从外部设置的参数,过滤和排序在相同的计算属性中完成。这是一个有效的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>