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)，会给你一个 keys 数组，可能在原始顺序中。

所以不是类似的东西

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

做

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

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

你也可以试试Object.entries看你是否需要IE支持。

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