Naravno, počnimo s Vue.js koji je open-source JavaScript okvir koji se koristi za izgradnju korisničkih interfejsa i aplikacija na jednoj stranici. Pruža v-for direktivu za prikazivanje liste stavki na osnovu izvora podataka. U nekim slučajevima, možda ćemo morati prikazati listu obrnutim redoslijedom. Ovdje na scenu stupa Vue.js-ov obrnuti filter.
V-for direktiva u Vue.js je moćna funkcija koja nam omogućava da pregledamo podatke i prikažemo ih na korisničkom sučelju. Međutim, nema unaprijed konfiguriran način za obrnuti redoslijed prikazanih stavki. Da bismo to postigli, moraćemo da iskoristimo JavaScript metode manipulacije nizom.
let array = [1,2,3,4,5]; let reversedArray = array.reverse(); // reversedArray is now [5, 4, 3, 2, 1]
Obrnuti redoslijed prikaza sa Vue.js
Možete koristiti Vue.js v-for direktivu i JavaScript-ov reverzni metod da biste obrnuli redoslijed liste koju prikazujete. Prvo treba da obrnete niz pre nego što ga prosledite za prikaz.
new Vue({
el: "#app",
data: {
array: [1,2,3,4,5]
},
computed: {
reversedArray() {
return this.array.slice().reverse();
}
}
});
Objašnjenje koda
Prvo, pravimo kopiju originalnog niza koristeći metodu .slice() kako ne bismo mutirali originalni niz. Zatim koristimo funkciju reverse() da preokrenemo niz i spremimo ga u izračunato svojstvo “reversedArray”.
Zatim možemo koristiti ovo svojstvo u našoj v-for direktivi, ovako:
<div id="app">
<li v-for="item in reversedArray">{{ item }}</li>
</div>
Tako će v-for petlja proći kroz 'reversedArray' umjesto originalnog niza. Izračunato svojstvo 'reversedArray' uvijek će isporučiti obrnutu verziju našeg niza, stvarajući željeni efekat.
Vue.js biblioteke
Postoje neke biblioteke poput vue-flipper i vue-smooth-reflow koje takođe pružaju rješenja za preokretanje lista u Vue.js. Ove biblioteke pružaju više funkcionalnosti i opcija za rukovanje listom. Definitivno ih vrijedi provjeriti za složenije scenarije.
U zaključku, obrnuti redoslijed prikaza u Vue.js pomoću v-for direktive je jednostavan. Sa nekoliko redova JavaScripta, možemo manipulisati našim podacima kako bi odgovarali našim potrebama. I zapamtite, Vue.js nije samo ono što pruža iz kutije. Radi se o viđenju izvan okvira. Uvijek možete iskoristiti prednosti i mogućnosti JavaScripta kako biste zadovoljili svoje specifične potrebe u vašim Vue.js aplikacijama.
