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

Question

我很难尝试用orderBy来连接filterBy，在vuejs 2.0上，我发现了关于这个主题的所有研究成果，我的问题。

这是我的过滤器，这是工作：

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

我在docs我们如何使用这个排序依据发现的，在this very long conversation如何使用过滤器联合排序，但我真的不能实现它...

这应该是一些这样的：

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

但尽管如此，还是它不会编译或它带有错误，如：

属性未定义（这是定义如我是我们在另一种方法）funcion的 方法没有找到荷兰国际集团它（是发生在我的评论方法排序 ..也许这里就是我失去了一些东西）

感谢您的帮助！

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>