渲染无序对象Vue

Question

有一个对象有一些属性，其中一个是"平均"值，该对象从后端按该值排序，所以如果我们用Postman访问该对象，就会显示它应该是什么样子：

ranking: {
"5": {
"name": "Name5",
"average": "65"
},
"2": {
"name": "Name2",
"average": "59"
},
"4": {
"name": "Name4",
"average": "65"
},
"3": {
"name": "Name3",
"average": "65"
},
"1": {
"name": "Name1",
"average": "65"
},
}

问题是，当使用v-for时，它会根据索引(1，2，3，4，5(进行渲染，但它需要根据API调用进行渲染。

有没有任何方法可以渲染

这是v-for代码(在真实对象中，有一个名为id_sharp的字段，对应于他们的个人标识(：

<div v-for="(persona, index) in ranking" :key="persona.id_sharp">
{{ persona.name }} -- {{ persona.average }}
</div>

Answer 1

问题是键可以解析为数字。整数。例如"；1〃"2〃"3〃；。

参见示例：

let b =  {   "5": {
"name": "Name5",
"average": "65"
},
"2": {
"name": "Name2",
"average": "59"
},
"4": {
"name": "Name4",
"average": "65"
},
"3": {
"name": "Name3",
"average": "65"
},
"1": {
"name": "Name1",
"average": "65"
},
}
console.log(b,"order by index")
let c =  {   "5b": {
"name": "Name5",
"average": "65"
},
"2b": {
"name": "Name2",
"average": "59"
},
"4b": {
"name": "Name4",
"average": "65"
},
"3b": {
"name": "Name3",
"average": "65"
},
"1b": {
"name": "Name1",
"average": "65"
},
}


console.log(c,"keep ordered")

最后，不同的js引擎有不同的行为。你有两件事要涵盖所有这些。

1-在前端排序并map一个具有所需逻辑的数组

将API响应与对象的有序数组进行OR运算。

2-不要使用整数作为键。以防您想保持对象的顺序。

Answer 2

首先，我获取对象的值，并将它们放入一个数组中，行如下：

this.ranking = Object.values(
this.generalFilterData.filter((category) => {
return category.id == this.id;
})[0].ranking
);

最后，我做的是从API获取排名后的排序：

this.ranking.sort(
(a, b) => parseFloat(b.average) - parseFloat(a.average)
);

这就成功了。

不管怎样，谢谢大家帮助我。