如何在vue.js中对计算属性进行排序
如何在vue.js中对计算属性进行排序
提问于 2019-11-06 08:06:33
我不知道如何对已经计算过的结果数组进行排序。
在Vue中，我根据图像的比例对图像进行过滤。现在，我想按日期、名称或任何可能的方式对各个结果进行排序。
我尝试使用一个方法对数组进行排序，但此解决方案不会自动重新计算并动态显示排序的结果。
data() {
return {
results: [],
imgProperties: {
imgId: [],
imgRatio: [],
imgCreateDate: []
}
};
},
computed: {
resultsFiltered() {
if (this.sliderVal == 0) {
return this.results;
} else {
const obj = [];
const arr = [];
for (let i = 0; i < this.ratioIndeces.length; i++) {
const element = this.ratioIndeces[i];
obj.push(this.results[element]);
arr.push(this.imgProperties.imgRatio[element]);
}
return obj;
}
}
},这里看不到排序方法。
我想知道如何或从哪里开始。
代码示例显示了当前结构的摘录。在这些方法中计算了该比率。
我想按以下方式对数组进行排序
和
..。
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-02-19 19:23:05
这是我的最新方法
过滤结果并对其进行排序
同时通过参数：
computed: {
resultsFiltered () {
return this.built.dataset.filter(img => {
return this.customFilters.every(key => {
const parameter = this.params[key]
const args = parameter.map(val => this.customInputs[val]).slice(1)
return filterMenus[key](img[parameter[0]], ...args)
})
}).sort(this.sortings[this.sortDirection][this.sortType])
}
},单个元素：
=是一个对象数组。每个img都是一个对象。
=是一个带有筛选选项的数组。如“ratio”或“keyword”。这样我就可以用我在列表中得到的每一个键进行过滤。
=用户键入的内容。日期范围、比率、关键字、年份...
=将img1与img2进行比较
=向上或向下。就像‘img2.rate-img1.atio’
=字母、数字、按日期或重置为默认视图
Stack Overflow用户
发布于 2019-11-06 10:12:02
排序方式示例
：
{{ result.imgRatio }}或者
{{ result.imgRatio }}computed: {
resultsFiltered() {
if (this.sliderVal == 0) {
return this.results.sort((a, b) => { return b.imgRatio - a.imgRatio;});
} else {
const obj = [];
const arr = [];
for (let i = 0; i < this.ratioIndeces.length; i++) {
const element = this.ratioIndeces[i];
obj.push(this.results[element]);
arr.push(this.imgProperties.imgRatio[element]);
}
return this.obj.sort((a, b) => { return b.imgRatio - a.imgRatio;});
}
}
},对于Vue2，您可以参考
这里
Stack Overflow用户
发布于 2019-11-06 10:04:01
如果计算属性使用数据属性来控制排序，则可以这样做。首先，我创建了包含原始的、未排序的数据和当前排序的数据：
data: {
origItems:[
{name:'ray', age:10},
{name:'apple', age:20},
{name:'zula', age:9},
],
sortType:''
},然后我构建了我的计算，根据sortType返回值：
computed:{
items() {
if(this.sortType === '') return this.origItems;
if(this.sortType === 'name') {
return this.origItems.sort((a,b) => {
if(a.name < b.name) return -1;
if(a.name > b.name) return 1;
return 0;
});
}
if(this.sortType === 'age') {
return this.origItems.sort((a,b) => {
if(a.age < b.age) return -1;
if(a.age > b.age) return 1;
return 0;
});
}
}这可能会写得更紧凑。我使用此布局进行测试：
Sort by Name
Sort by Age
{{ item.name}} - {{ item.age }}你可以在这里看到一个在线的例子：
https://codepen.io/cfjedimaster/pen/eYYMVWr?editors=1011
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58721267
复制相关文章
相似问题
腾讯云开发者
