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支持。

如果这将被广泛部署，预计它会在某个时候打破某人。如果你只需要一些适合你的东西，那就可以做到。