1

我很难尝试在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)
}

为了遵守我的 orderBy 我有这个方法：

// 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，并且在这个很长的对话中找到了如何使用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' )

但是，或者它没有编译或者它带有错误，例如：

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

谢谢你的帮助！

4

1 回答 1

7

您的方法的想法似乎是有效的，但是如果没有完整的示例，很难说出实际可能出现的问题。

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