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>