如何根据 Vuejs 中的 Id 对特定数组位置进行排序？ [复制]答案

【问题标题】：How to sort particular array position based on the Id in Vuejs? [duplicate]如何根据 Vuejs 中的 Id 对特定数组位置进行排序？ [复制]
【发布时间】：2021-11-02 11:03:05
【问题描述】：

<div v-for="(item, index) in gr" 
:key="space.id"
class="val-name">
</div>

我在 api 调用中使用以下几行更改完成了该逻辑，例如

有了它，我最终想要实现的目标。但问题是，我不能期望数组值一直相同。所以我决定根据 ID 重新排列数组值。

【问题讨论】：

我想知道确切的目标是什么。因为我怀疑你是否提供了所有信息。您想要的数组顺序似乎有些随机。如果您只想在具有可假定 ID/名称的数组中具有特定顺序，那么您可以创建一个映射以针对您的 API 响应数组运行，以始终按特定顺序排序。

标签： javascript vue.js

【解决方案1】：

orderMap 将是您想要的索引结果。

array 将是您的 API 响应。

使用函数映射orderMap 并找到所需的索引并将其放入我们的sorted 数组中。

const orderMap = ['third', 'second', 'first'];

const array = [{name: 'first'}, {name: 'second'}, {name: 'third'}];

let sorted = orderMap.map(function(sortBy){
  return this.find(function(toSort){return toSort.name === sortBy})
}, array)

console.log(sorted);

// as method -> Result is your response Data. OrderMap the map to order by. 
sortResultSet(result, orderMap) {
  return orderMap.map(function(sortBy){
    return this.find(function(toSort){return toSort.name === sortBy})
  }, result)
}

【讨论】：

从中得出一个计算值。 computedArray(){ const orderMap=[...]; return orderMap.map(function(element){ return this.find(function(el, i){return i === element}) }, array);} 其中 array 是你的 var 和响应数组
或者你为它创建一个方法，在成功响应后调用。这取决于你
@tzuker 我更新了我的答案。 orderMap 以所需的顺序保存名称，find 回调为每个索引返回具有所需名称的项目。

【解决方案2】：

您可以编写一个自定义排序函数，以便根据您的需要对它们进行排序。例如：

function Sort(item1, item2){
  if (item1.name > item2.name)
    return 1;
  else if (item1.name < item2.name)
    return -1;
  else 
    return 0;
}

然后在数组上调用它

array.sort(Sort);
console.log(array);

如果你愿意，可以省略函数声明，只将函数作为参数传递。

array.sort(function (item1, item2) {
  <same code from above>
});

然后只需将其添加到 Vue 中所需的对象

【讨论】：