在Vuejs中如何根据ID对数组特定位置的元素进行排序？

你当前的v-for代码存在一处可优化点：遍历的对象是gr数组的item，绑定的key却用了不存在的space.id，建议先调整为item.id避免渲染报错：

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

推荐实现方案（响应式自动排序） #

用Vue计算属性实现，只要gr数组发生变化，会自动重新按ID排序，不需要手动触发排序逻辑：

• 在组件的computed配置中添加排序逻辑：

computed: {
  sortedGr() {
    // 先浅拷贝原数组，避免sort方法原地修改原数组
    return [...this.gr].sort((a, b) => {
      // 数字ID升序排序，要降序的话改为 b.id - a.id
      return a.id - b.id
      // 如果是字符串ID，用下面的逻辑
      // return a.id.localeCompare(b.id)
    })
  }
}

• 把v-for遍历的源数组从gr替换为计算属性sortedGr即可，参考上面调整后的模板代码。

可选方案（请求数据时直接排序） #

如果不需要保留原数组的顺序，可以在拿到API返回数据后直接排序再赋值给gr：

// 接口请求成功后的回调逻辑
fetchGrApi().then(res => {
  const list = res.data
  // 直接排序后赋值
  list.sort((a, b) => a.id - b.id)
  this.gr = list
})

注意事项 #

• 数组的sort方法默认是原地排序，会修改原数组，不需要修改原数组时一定要先通过展开运算符[...arr]或者arr.slice()浅拷贝一份再排序
• 如果ID是字符串类型的数字，建议先转成数字再比较，避免出现字符串排序的异常结果（比如'10' < '2'的问题）

内容的提问来源于stack exchange，提问作者T dhanunjay