VueJS2 Sortierung JSON

Question

Ich habe eine v-for, die Nachrichten in einer JSON-Antwort durchlaufen und sie auf dem Bildschirm drucken wird. Die Nachrichten kommen vom Server in chronologischer Reihenfolge, aber wenn ich die Daten über das Vue Chrome-Add-In ansehe, werden die Daten alphabetisch nachbestellt.

Ich habe ein einfaches Beispiel.

Hier ist die angeforderte JSON über Postman:

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

Hier wird das gleiche Ergebnis ist, wenn ich den Anruf über Vue machen und machen v-für die Verwendung:

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

Die Frage ist also, kann ich Vue davon abhalten, meine Daten neu zu ordnen? Wenn nicht, wie soll ich es dann richtig anordnen?

Answer 1

Wie die Kommentatoren festgestellt haben, ist die Reihenfolge der Schlüssel in einem Objekt nicht garantiert. Daher ist es am besten, wenn der Server Nachrichten in einer geordneten Struktur (wie ein Array) ausgibt.

Wenn das nicht möglich ist, ich habe festgestellt, dass die Schlüssel um allgemein in einem Objekt erstellt auf einmal (wie Ihre JSON-Daten) erhalten ist. Object.keys(data), erhalten Sie eine Reihe von Schlüssel das ist wahrscheinlich in der ursprünglichen Reihenfolge.

Anstatt also so etwas wie

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

tun

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

und dann data[key], um den Wert zu erhalten.

Sie können auch versuchen Object.entries je nachdem, ob Sie IE-Unterstützung benötigen.

Wenn dies weit verbreitet sein wird, erwarten Sie, dass es irgendwann für jemanden bricht. Wenn Sie nur etwas brauchen, das für Sie arbeitet, könnte dies dies tun.