Vue.js: Korzystanie z pętli

Vue.js 2.5.x

0:00W tej lekcji poznasz kolejną dyrektywę, która jest niezwykle ważna w przypadku

0:04budowania aplikacji internetowych, a będzie to v-for służąca

0:08do tworzenia pętli, czyli v-if oraz v-show już poznałeś

0:12i one bardzo się nam również przydadzą w tej lekcji, ale pokażę ci jak

0:16działa v-for. Na początek w naszej aplikacji mam tablicę users

0:21i tutaj są obiekty z użytkownikami, z ich danymi. Docelowo to mogłoby

0:25być pobrane z użyciem Ajax'a z serwera i będziemy chcieli przeiterować po tej

0:29tablicy i wyświetlić wiersz w tabeli dla każdego z tych użytkowników. Co

0:34ja już zrobiłem, otóż mam tabelę i zrobiłem v-if, czyli ona ma być renderowana

0:38wyłącznie jeżeli users length jest wartością prawdziwą, czyli jeżeli w

0:42tej tablicy coś jest. Jeżeli byłaby ona pusta, no to wtedy ta

0:47tabela się nie pojawi. Jeżeli będzie pusta, to będziemy tutaj mieli v-else,

0:51brak danych do wyświetlenia, to nam się za moment przyda. No i tutaj mam już

0:55taką strukturę tej tablicy, ale chciałbym wewnątrz tbody, tutaj

0:59stworzyć sobie tr i w nim td z danymi,

1:03czyli tutaj chciałbym mieć odpowiednie dane. Będziemy mieć 3 razy tutaj takie td i teraz

1:08tutaj chciałbym wykonać właśnie pętle. Robimy to za pomocą dyrektywy

1:12v-for i tutaj musimy napisać jak ma się nazywać docelowa

1:16zmienna, więc user in users. No i to users, super

1:21ważne, to jest coś co mamy w data lub na przykład computed, tak jak mieliśmy do

1:25tej pory. Tutaj nic się nie zmienia, ale to jest dokładnie ta nazwa, czyli user

1:29in users. Ważne jest również to, że możesz napisać user of users. Działa

1:34to dokładnie tak samo. Natomiast of jest czymś nowym w

1:38przypadku EcmaScript6. Tutaj nie ma to znaczenia. Natomiast jeżeli przywykłeś w ES6

1:42do korzystania z pętli for of, możesz tutaj napisać of. Natomiast in zadziała

1:47tak samo, czyli user in users i to nam pozwala na to, żeby

1:51tutaj odwoływać się do zmiennej user, która będzie jednym

1:56z elementów tej tablicy, a wiemy, że te elementy są to obiekty, więc teraz

2:00mogę napisać user first name last name czy age. No i to będziemy chcieli

2:04zrobić, więc będę chciał sobie tutaj wyświetlić user first name

2:10postawimy spację

2:14i zrobimy user last name. Natomiast chciałbym żeby

2:18to było w drugim td, tutaj gdzie imię i nazwisko. Pierwsze sobie

2:22za moment uzupełnimy. Tutaj chciałbym wstawić wiek, więc zrobimy user age

2:27po prostu i na początek może to przetestujemy. Jak widzisz, to wszystko

2:31działa poprawnie, natomiast chciałbym jeszcze liczbę porządkową tutaj dodać, więc pokażę

2:35ci jak możesz przechwycić również indeks iteracji. To można opleść w

2:39ten sposób i podać indeks jako drugi parametr. Nazwę to

2:43zmienię do zmiennej dowolna, możesz ją nazwać i. Ja ją nazwę index i

2:47dzięki temu ten indeks możemy tutaj wstawić, ale jak to bywa przy iteracji

2:52tablic, będzie to zero na początku, więc chcę zrobić index plus 1

2:56i może jeszcze za tym sobie dopiszemy kropeczkę i tak to będzie

3:00wyglądać, więc wyświetliliśmy wszystkich użytkowników. Natomiast teraz rzecz, która

3:05jest super ważna jest taka, że to wszystko jest oczywiście reaktywne, więc gdybyśmy

3:09przeszli tutaj i mamy naszą tablice, zauważ, że jeżeli usunę

3:13któryś element, jest to odzwierciedlane na stronie, więc znowu widzisz

3:17jak Vue nam pomaga budować interaktywne aplikacje. Tutaj definiujemy co się ma

3:21dziać, czyli w zasadzie, że na przykład te elementy mają być wyświetlane tyle

3:26razy ile ich jest w tablicy i nic więcej tutaj nie musimy robić. Jeżeli w jakiś sposób

3:30usuniemy element z tablicy, Vue o tym wie i później

3:34od nowa to wyrenderuje i oczywiście co jest ciekawe Vue nie będzie renderowało

3:38wszystkich tych tr, bo jest na tyle można powiedzieć inteligentne, że wie, który z

3:42nich może usunąć i jak może te elementy używać. Natomiast

3:47teraz pytanie brzmi, w jaki sposób moglibyśmy zaimplementować sobie

3:51usuwanie takich elementów, otóż moglibyśmy przypisać zdarzenie kliknięcia tutaj

3:55w pętli do tego elementu, czyli click i nazwali byśmy metodę remove

4:00i przy jej wywołaniu moglibyśmy przekazywać tutaj na przykład indeks, czyli

4:05skoro indeks mam pod zmienną, mogę go przekazać i teraz twórzmy sobie taką metodę. Ona

4:10tutaj otrzyma oczywiście ten indeks, ten parametr tutaj może się nazywać dowolnie i

4:15mając taki indeks będę mógł się do tej tablicy odwołać, this users

4:19i być może pamiętasz jak ci pokazywałem, że Vue opakowuje pewne metody

4:24tablic i stąd wie, że wykonaliśmy coś na takiej tablicy, bo jeżeli tylko nadpisywaliśmy,

4:28wtedy się wykonuje setter, no i Vue o tym wie, natomiast opakuje

4:32również, również niektóre z metod tablic i mamy taką metodę jak splice i ona

4:36nam pozwala wyciąć jakiś element tablicy. Więc mogę powiedzieć, pod którym

4:40indeksem ten element jest i ile elementów chcę wyciąć, więc wytnę

4:44po prostu 1 i to modyfikuje tą tablice dlatego jeżeli usuniemy sobie jakiś

4:49element to Vue musi od nowa to odzwierciedlić na stronie, więc

4:53to nam powinno już w tym momencie działać, a więc ten indeks jest przekazywany w

4:57tym miejscu. Sprawdźmy, jeżeli kilknę na Katarzyna Tomczyk, została

5:02ona usunięta i zostało to odzwierciedlone na stronie. Natomiast to o czym

5:06mówiłem, Vue wcale nie wyrenderuje tego wszystkiego od nowa. Wie, które elementy tr

5:11może zachować, a z których może skorzystać również ponownie, więc jest

5:15to super wydajne i teraz jeżeli tak będziemy klikać, to w pewnym momencie usuniemy

5:19wszystkie elementy i zauważ, że będzie brak danych do wyświetlenia, bo ta tablica

5:23będzie pusta i znowu jeżeli jest pusta to ten element ma się nie pokazywać. Ma

5:28się pokazywać wyłącznie ten. Jak zatem widzisz, bajecznie proste jest tworzenie

5:32interaktywnych aplikacji. Wyobraź sobie jak wiele musiałbyś napisać

5:36kodu i jak on był zagmatwany, żeby coś takiego uzyskać, na przykład pisząc

5:40w bibliotece jQuery, która i tak nam sporo rzeczy ułatwia, ale

5:45nie jest niestety rozwiązaniem idealnym tego typu aplikacji,

5:49więc tutaj Vue sprawdza się jak widzisz świetnie. Co ważne możemy

5:53za pomocą v-for iterować również po obiektach, czyli jeżeli mamy taki obiekt, możemy

5:57przeiterować i będziemy mogli wyłuskać sobie klucz, czyli wartość. Ja

6:02będę chciał ci to pokazać teraz już tutaj wklejając fragment kodu, żebyśmy tego

6:06nie musieli wszystkiego pisać, więc jeżeli będziesz potrzebował również

6:10sobie z tym poradzisz. Zrobiłem tutaj nagłówek json i w takim

6:14elemencie będę chciał to zrobić. Jeżeli mamy jakiś użytkowników to go wyświetlam i zauważ,

6:18że tym razem v-for będę iterował po obiekcie, czyli value,

6:23key oraz index. Nie musisz przyjmować wszystkich tych parametrów jeżeli nie chcesz. Możesz przyjąć tylko

6:27jeden dwa lub maksymalnie trzy, ale musimy iterować nie w tablicy, ale

6:31w obiekcie dlatego odwołałem się do users 0 żeby mieć taki oto obiekt

6:35i tutaj pod value wpadnie mi wartości Jan,

6:39pod key wpadnie mi first name, a pod index będę miał po prostu

6:431, 2, w zasadzie

6:48tak 1, 2, czyli indeks tej iteracji. Zobaczmy jak to może wyglądać.

6:52W ten sposób, first name last name i age, czyli

6:56miałbym po prostu 1, 2 i 3 bo są trzy takie klucze. Nigdzie tego indeksu nie wyświetlam, więc

7:00po prostu go tutaj nie widać, ale jak widzisz w ten sposób można również iterować po

7:04obiektach, jeżeli jest to coś co będzie Ci kiedykolwiek potrzebne i jeszcze

7:08ostatnia rzecz, która jest oferowana przez v-for. Jest

7:12to generowanie takiego przedziału, czyli możemy iterować na przykład od

7:171 do 10, jeżeli chcielibyśmy zrobić coś takiego, więc teraz też

7:21wkleję taki fragment tutaj, żeby ci

7:25to pokazać. Możemy zrobić v-for n in 10, czyli będziemy mieli

7:29po kolei pod zmienną n 1 2 3 4 i tak do dziesięciu zmianą

7:33możesz nazwać inaczej. No i możesz ją wyświetlić w dowolnym miejscu. Natomiast

7:37ja tutaj zrobiłem coś takiego jeszcze w v-if, bo jest to ważne, że

7:41w v-if można połączyć z v-for i od tego warunku zależy czy ten element się pojawi

7:45czy nie. Zrobiłem tutaj coś takiego żeby tylko parzyste liczby wyświetlać

7:50i wyświetlam sobie tę liczbę. No i jeżeli nie jest to ostatnia już iteracja

7:54to jeszcze chcę dodać przecinek. Zauważ, że takie wrażenie również można tutaj sobie

7:58dodać. Na spokojnie sobie na to zerknij, ale jak widzisz stworzyłem po pierwsze

8:03range od jeden do dziesięciu, a po drugie przy iteracji jeszcze if'em sprawdziłem

8:07sobie warunek. Jeżeli jest prawdziwy, tylko wtedy dany wiersz można

8:11powiedzieć tej iteracji się tutaj pojawia, więc tak by to wyglądało, a

8:15więc zapamiętaj z tej lekcji że v-for pozwala nam iterować

8:19po tablicach, gdzie możemy sobie przyjąć element tablicy i indeks

8:23jeżeli jest nam potrzebny, po obiektach, gdzie mamy value, key oraz index

8:27nazwy tych parametrów dowolne, ale kolejność wymagana i również

8:32możemy tworzyć sobie range dowolna nazwa zmiennej. Następnie in oraz

8:36wartość liczbowa i będziemy mogli sobie w ten sposób z tego korzystać. Na koniec

8:41również zapamiętaj jedno z bardzo ważnych rzeczy. Jeżeli zmodyfikujemy

8:45tablice, która była użyta przy before to będzie to odzwierciedlone na stronie.