javascript - VueJS2 排序 JSON

Question

我有一个 v-for 它将遍历 JSON 响应中的消息并将其打印到屏幕上。消息按时间顺序来自服务器，但是当我通过 Vue chrome 插件查看数据时，数据将按字母顺序重新排序。

我有一个简单的例子。

这是通过 Postman 请求的 JSON:

{
    "e": "e",
    "d": "d",
    "c": "c",
    "b": "b",
    "a": "a"
}

当我通过 Vue 进行调用并使用 v-for 进行渲染时，这是相同的结果:

data:Object
a:"a"
b:"b"
c:"c"
d:"d"
e:"e"

所以问题是，我可以阻止 Vue 对我的数据重新排序吗？如果没有，我应该如何正确地重新排序？

Answer 1

正如评论者所指出的，对象中键的顺序无法保证，因此最好的选择是让服务器以有序结构(如数组)发出消息。

如果这是不可能的，我发现键顺序通常保存在一次创建的对象中(例如 JSON 数据)。 Object.keys(data) ，将为您提供一个键数组，可能按原始顺序排列。

所以不要像这样

<div v-for="value in data">

做

<div v-for="key in Object.keys(data)">

然后使用data[key]获取值。

您也可以尝试Object.entries取决于您是否需要 IE 支持。

如果这要被广泛部署，预计它会在某个时候对某些人造成破坏。如果您只需要一些适合您的东西，这可以做到。