使用计算属性[vue.js]中的高阶函数对过滤后的数组进行排序

Question

我想在不同的排序方法之间切换，以按数字、日期和标题等对数组进行排序。

我想将创建的钩子中的所有排序方法存储为高阶函数：

created () {
this.sortings = [
{
asc: (img1, img2) => img2[this.sortBy] - img1[this.sortBy],
desc: (img1, img2) => img1[this.sortBy] - img2[this.sortBy],
compare: (a, b) => a.ratio - b.ratio
}
]
}

我的计算属性如下：

computed: {
resultsFiltered () {
return this.imgData.filter(...).sort(this.sortings[this.sortMethod])
}
}
},

我的目标是通过更改Data对象中的sortMethod来切换排序：

data () {
return {
sortMethod: "compare" // or "asc", "desc",
sortBy: "ratio" // or "date", "title", "filesize", ...
}
}

如何到达"thise.sortings"中的高阶函数来对我的计算属性进行排序？

此外，我不知道如何将参数传递给排序函数：/

我希望你能帮助我，谢谢！

Answer 1

为了使反应性发挥作用，您应该将this.sortings放在数据部分。此外，你需要纠正这一点。如果你希望它像字典一样工作，请进行分类：

this.sortings = {
asc: (img1, img2) => img2[this.sortBy] - img1[this.sortBy],
desc: (img1, img2) => img1[this.sortBy] - img2[this.sortBy],
compare: (a, b) => a.ratio - b.ratio
}

比较器函数的参数由数组的排序方法传递。

Answer 2

Array.prototype.customSort = function (key, order='asc') {
let arrayOfObject = [...this]
let compare = (a,b) => {
if (a[key] < b[key]) {
return order === "asc" ? -1 : 1;
}
if (a[key] > b[key]) {
return order === "asc" ? 1 : -1;
}
return 0
}
return arrayOfObject.sort(compare)
}
new Vue({
el: '#app',

data: {
filteredArray: [
{ serialNo: 1, date: '1994-12-20', title: 'big title' },
{ serialNo: 2, date: '1994-12-22', title: 'small title' },
{ serialNo: 3, date: '1993-12-20', title: 'large title' },
{ serialNo: 4, date: '1992-12-20', title: 'mid title' },
{ serialNo: 5, date: '1991-12-20', title: 'great title' },
{ serialNo: 6, date: '1994-10-20', title: 'awesome title' }
],
currentKey: 'serialNo',
currentOrder: 'asc'
},

computed: {
getSortedFilteredArray () {
return this.filteredArray.customSort(this.currentKey, this.currentOrder)
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- CHOOSE KEY TO SORT -->
<span>Select key: </span>
<button @click="currentKey = 'serialNo'">serialNo</button> | 
<button @click="currentKey = 'date'">date</button> | 
<button @click="currentKey = 'title'">title</button>
<br/>

<!-- CHOOSE ORDER TO SORT -->
<span>Select order: </span>
<button @click="currentOrder = 'asc'">asc</button> |
<button @click="currentOrder = 'desc'">desc</button>
<br/>

<!-- SELECTED SORT / ORDER -->
<span>Current key : {{ currentKey }}</span> |
<span>Current order : {{ currentOrder }}</span>

<!-- SORTED RESULT -->
<ul>
<li 
v-for="(obj, i) in getSortedFilteredArray"
:key="i"
>
{{ obj }}
</li>
</ul>
</div>