Ich verwende Vue JS, um Viewmodel-Bindungen zu erstellen. In meinem data -Objekt habe ich ein Array von Elementen, die in aufsteigender Reihenfolge (älteste bis neueste) sortiert sind, und ich möchte es aus codebasierten Gründen so behalten.
Wenn ich jedoch das Array in der Vorlage anzeige, möchte ich die Reihenfolge umkehren, so dass sie absteigend ist (von neu nach alt). Ich habe folgendes versucht:
%Vor% Dies hat nicht funktioniert, da der Filter orderBy anscheinend einen Feldnamen als erstes Argument benötigt.
Gibt es eine Möglichkeit, dies in der Vorlage mithilfe der v-for -Syntax mit dem orderBy -Filter zu erreichen? Oder muss ich einen benutzerdefinierten reverse Filter erstellen?
Hinweis: Das Folgende funktioniert in Vue 1, aber in Vue 2 Filter sind veraltet und Sie wird sehen: 'Property oder Methode "reverse" ist nicht definiert auf der Instanz, aber während des Renderns referenziert. ' Siehe tdom_93s Antwort für vue2.
Sie könnten einen benutzerdefinierten Filter erstellen, um die Elemente in umgekehrter Reihenfolge zurückzugeben:
%Vor% Verwenden Sie es dann im Ausdruck v-for :
Ich möchte einige Möglichkeiten aufzeigen, wie Sie mit Daten arbeiten können und keine Filter verwenden, da diese in Vue2 veraltet sind:
innerhalb der berechneten Eigenschaft
Verwenden Sie berechnete Eigenschaften anstelle von Filtern, was viel besser ist, da Sie diese Daten überall in der Komponente verwenden können, nicht nur in der Vorlage: jsFiddle
%Vor%innerhalb der Vuex-Getter-Eigenschaft
Wenn Sie Vuex verwenden und Ihre Daten in store.state object speichern. Der beste Weg ist eine Transformation mit Daten, die im Zustand gespeichert sind, in getters object ( zum Beispiel Filtern durch eine Liste von Elementen und Zählen von ihnen, umgekehrte Reihenfolge usw. )
und den Status von Gettern in der Component-compute-Eigenschaft abrufen:
%Vor% Die v-for-Anweisung unterstützt das Rückwärts-Iterieren nicht. Wenn Sie also nach dem neuesten Stand bestellen möchten, müssen Sie ein weiteres Feld hinzufügen, um anzugeben, wann das Element hinzugefügt wurde, oder id ändern, um jedes Mal zu erhöhen Ein Element wird hinzugefügt.
Dann, wobei field das Feld ist, das die hinzugefügte Reihenfolge anzeigt:
Tags und Links javascript arrays vue.js