Come si inverte l'ordine di un array usando v-for e orderBy filter in Vue JS?

Question

Sto utilizzando Vue JS per eseguire i collegamenti viewmodel. Nell'oggetto data ho una matrice di elementi ordinati in ordine crescente (dal più vecchio al più recente) e mi piacerebbe mantenerlo in questo modo per motivi basati sul codice.

var v = new Vue({ 
    el: '#app', 
    data: { 
     items: [ 
      {id: 51, message: 'first'}, 
      {id: 265, message: 'second'}, 
      {id: 32, message: 'third'} 
     ], 
    } 
} 

Tuttavia, quando visualizzo la matrice nel modello mi piacerebbe invertire l'ordine in modo che sia discendente (recente al più vecchio). Ho provato quanto segue:

<ol> 
    <li v-for="item in items | orderBy -1" track-by="id"> 

Questo non ha funzionato dal momento che il filtro orderBy sembra richiedere un nome di campo come primo argomento.

Esiste un modo per ottenere questo risultato nel modello utilizzando la sintassi v-for utilizzando il filtro orderBy? O dovrò creare un filtro personalizzato reverse?

Answer 1

Nota: Il sotto lavora a Vue 1, ma in Vue 2 filtri sono obsolete e si vedrà : "Proprietà o metodo" inverso "non è definito nell'istanza ma fatto riferimento durante il rendering. ' Vedi tdom_93's risposta per vue2.

È possibile creare un filtro personalizzato per restituire gli oggetti in ordine inverso:

Vue.filter('reverse', function(value) { 
    // slice to make a copy of array, then reverse the copy 
    return value.slice().reverse(); 
}); 

poi usarlo nella v-for espressione:

<ol> 
    <li v-for="item in items | reverse" track-by="id"> 

https://jsfiddle.net/pespantelis/sgsdm6qc/

Answer 2

La direttiva v-for non supporta la iterazione all'indietro, quindi se si desidera effettuare l'ordine per il più recente, sarà necessario aggiungere un altro campo per indicare quando è stato aggiunto l'elemento o modificare id per incrementare ogni volta un articolo è aggiunto.

Poi, con field essendo il campo incriminare l'ordine aggiunto:

<li v-for="item in items | orderBy 'field' -1" track-by="id"> 

Answer 3

Aggiornamento per vue2

Voglio mostrare alcuni modi in cui è possibile lavorare con i dati e non utilizzando filtri come sono deprecato in vue2:

all'interno della proprietà calcolata

Usare calcolato proprietà al posto di filtri, che è molto più meglio, perché è possibile utilizzare tali dati in tutto il mondo in un componente, non solo solo nel modello: jsFiddle

computed: { 
    reverseItems() { 
     return this.items.slice().reverse(); 
    }  
} 

all'interno Vuex getter pr operty

Se si utilizza Vuex e si memorizzano i dati nell'oggetto store.state. Il modo migliore fare qualche trasformazione con dati memorizzati in stato è farlo in getters oggetto (ad esempio filtrazione attraverso un elenco di elementi e contarli, ordine inverso e così via ...)

getters: { 
    reverseItems: state => { 
     return state.items.slice().reverse(); 
    } 
} 

e recuperare lo stato da getter a componente immobiliare computerizzata:

computed: { 
    showDialogCancelMatch() { 
     return this.$store.state.reverseItems; 
    } 
} 

Answer 4

semplice e concisa soluzione:

<li v-for="item in items.slice().reverse()"> 
//do something with item ... 
</li>