我很难在 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 时,就会发生这种情况......也许这里是我遗漏的东西)
感谢您的帮助!
答案 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>