Vue.js: Edytowalna lista użytkowników cz.1

Vue.js 2.5.x

0:00W tej i w kolejnej lekcji stworzymy praktyczny projekt takiej tabeli, która

0:04będzie wyświetlała listę użytkowników. Będzie można ich usuwać oraz w

0:08kolejnej lekcji również edytować. Zobaczysz w jaki sposób tutaj połączyć

0:12wiedzę, którą do tej pory zdobyłeś, więc zaczniemy od stworzenia własnego

0:16komponentu, ale pokażę ci najpierw co mamy. Mamy główną instancję aplikacji

0:21i ona ma tablice users. Taką, którą już do tej pory widziałeś

0:25i teraz tu jest templatka żywa, czyli w drzewie DOM

0:29właśnie tej głównej aplikacji i będziemy chcieli sobie tych użytkowników tutaj moc

0:33wyświetlać, ale chciałbym to zrobić w taki sposób żebyśmy mieli komponent, który

0:37się będzie nazywał edu user i będziemy chcieli te komponenty w pętli wyświetlać,

0:41dlatego stworzymy sobie taki komponent. Możemy za pomocą Vue komponent, będzie

0:46on wtedy globalny edu user. Okej i

0:52jeżeli zrobimy to w ten sposób to wiesz, że tutaj będziemy mogli wpisywać edu

0:56user. Okej,

1:02no i każdy taki edu user będzie miał template. Korzystam

1:08z zapisu EcmaScript6 żebyśmy mogli tutaj w template stringu fajnie to sformatować i

1:12chciałbym żeby tam było TR, zaraz będziemy to rozwijać,

1:16zobaczysz jakie problemy napotkamy i skoro tutaj mamy TH,

1:21jak widzisz 4 razy, to będę miał chciał mieć również

1:254 razy TD, okej i na razie tutaj

1:29nic nie stawiam, ale chciałbym to wyrenderować, zobaczmy czy nam się uda, okej.

1:34Teoretycznie powinno to działać, ale jak jest w rzeczywistości tbody

1:38jest puste. Mógłbyś zapytać dlaczego tak się stało. Dlaczego TR pojawiło

1:43się w tym miejscu. Dzieje się tak dlatego, że nasza templatka tutaj

1:47jest żywa, jest osadzona w drzewie DOM zanim w ogóle Vue zostanie wczytane

1:51na stronie. Jest to dla nas problemem. Problemem takim, że pewne

1:56elementy nie mogą być w innych. Na przykład w liście ul mogą być tylko elementy li. Mówimy

2:01bezpośrednich dzieciach i w tbody mogą być tylko elementy tr,

2:05a my dodaliśmy tutaj taki element. No i teraz pytanie czy coś z tym można zrobić

2:09czy nie. Bo ten problem byłby rozwiązany, ja wielokrotnie właśnie ci mówiłem

2:13o tym, że jest różnica pomiędzy żywą templatką a templatka, która jest jako string

2:17w tag'u script lub tutaj w czymś takim. Różnica jest taka, że

2:21tutaj nie byłoby z tym problemu. Czyli gdyby nasza główna aplikacja templatka

2:26miała tutaj osadzoną poprzez template, moglibyśmy skorzystać z takiego zapisu, Vue by to

2:31sparsowało. Natomiast, jeżeli te elementy się pojawiają właśnie tutaj w drzewie

2:35DOM, to przeglądarka jest wyrzuca i wyrzuciła je przed tabelę, a później

2:39dopiero Vue zamieniło się na tr, dlatego się pojawiły w taki sposób. W związku

2:43z tym twoje pytanie pewnie brzmi czy można coś z tym zrobić, nie przenosząc całej

2:48tej templatki do takiej właściwości template czy w jakiś inny

2:52sposób do stringu. Można, możemy tutaj skorzystać z tr, czyli

2:56z takiego elementu, który wiemy, że jest obsługiwany przez przeglądarkę poprawnie. Natomiast w

3:00taki sposób, w tym sposobie jak skorzystać z naszego edu

3:05user, wystarczy, że tutaj dodamy atrybut is edu-user

3:10i vue potraktuje to w ten sposób, że całość zostanie

3:14jakby zamieniona, w taki sposób jakbyśmy tam podali edu user jako tag. To jak

3:18to zrobiłem przed momentem, ale sama przeglądarka nie będzie narzekać, zobacz. Teraz jeżeli

3:23odświeżymy, ja już widzę, że jest w porządku i mamy tutaj tbody i wszystkie

3:27te elementy się pojawiły, czyli ten tr jakby w

3:31całości został wyrzucony i zastąpiony templatką, w której jest właśnie nowe TR, bo

3:36wiem, że docelowo tutaj musi być TR, bo inaczej przeglądarka tego nie zinterpretuje poprawnie, więc

3:40ten TR to jest naprawdę tak naprawdę ten z wewnątrz, który jest tutaj. Okej, więc

3:45pierwszy problem za nami rozwiązany. Jak widzisz, on się pojawia tylko wtedy jeżeli

3:49ta templatka jest żywa w obiektowym modelu dokumentu. Teraz

3:53zatem będziemy chcieli wykonać tutaj pętle, więc zrobimy sobie v-for

3:58i może nawet zrobię to w tym miejscu albo nie. Zróbmy tak,

4:02bo będziemy dodawać jeszcze kilka innych rzeczy, v-for user in users

4:06przypominam, że chodzi o tę tablicę users i będziemy chcieli przekazać

4:10do tego komponentu chociaż jest to TR, ale napisaliśmy tutaj is edu user, więc

4:15jest to komponent, do którego prop możemy przekazywać tak samo jak wcześniej w przypadku edu counter

4:20i tutaj będę chciał przekazać sobie user, czyli binduje

4:24to na wartość user, czyli właśnie tą z tej iteracji i

4:28jeszcze index nie będzie interesował więc w zasadzie zróbmy to w ten sposób index

4:33user chce nam przekazać i index zbindujemy

4:38na wartość index, więc to nam wpadnie do komponentu, a więc nasz komponent byłoby

4:42miło, gdyby przyjmował to w props. Moglibyśmy

4:46tutaj wykonać walidacje, że user to musi być obiekt, na przykład. Ja dla uproszczenia tego

4:50robił nie będę, w prawdziwej aplikacji bym to zrobił. Podam tylko tutaj te, które przyjmujemy

4:55i wiemy, że będziemy mogli poprzez this user this index się do tego odwoływać,

4:59okej i mając to możemy sobie uzupełnić naszą templatkę w tym

5:03miejscu, czyli co będziemy chcieli mieć w pierwszym td, sprawdźmy jak to wygląda

5:08tutaj. Liczba porządkowa, no właśnie, więc tutaj sobie wyświetlimy właśnie ten

5:12indeks, który przekazaliśmy jako prop. W następnym

5:17będziemy chcieli podać imię i nazwisko. Jak tutaj wygląda mamy full name

5:21od razu, więc możemy podać, pamiętajmy że jest to user, przekazaliśmy

5:25cały obiekt jako user właśnie w prop, więc muszę tutaj napisać user full

5:29name, okej, sprawdzimy czy to ma sens. Wygląda

5:34na to, że tak. W liczbie porządkowej dodamy sobie jeszcze tutaj wartość

5:381, odświeżam. Jest w porządku. No

5:42i może jeszcze tak jak mieliśmy wcześniej w przykładzie po prostu kropkę. Kolejna rzecz, która nas interesuje

5:47Jest to wiek, więc napiszemy user age

5:51i ostatnia rzecz to będzie przycisk do usuwania. Tutaj będę chciał

5:55sobie wstawić przycisk tak to będzie wyglądać, będzie to

5:59przycisk, który będzie miał w środku ikonę delete, czyli taki kosz i

6:03po kliknięciu na ten przycisk chciałbym usunąć dany wiersz, czyli będę chciał

6:08w jakiś sposób komunikować do góry z tego właśnie komponentu,

6:12który tutaj będzie osadzany, komunikować do głównej aplikacji, bo to ona przechowuje

6:16te dane, że usunęliśmy jakiś element tablicy i że również to

6:20powinno tutaj zostać odzwierciedlone, bo ta templatka tutaj która renderuje tabelę, tak

6:24naprawdę ona jest zarządzana przez główną aplikacje, czyli

6:29przez instancje, która jest tutaj na samym dole, dlatego będę chciał zrobić taką rzecz,

6:33że tutaj dodamy sobie kliknięcie do tego oto przycisku i w

6:37tym kliknięciu wywołam metodę remove i przekażemy jej

6:41user id, ci użytkownicy mają unikalne id, jak

6:45widzisz, tylko ważne jest to że ta metoda się wykona oczywiście

6:49na instancji tego komponentu, czyli nie gdzieś na zewnątrz, a więc musimy tutaj mieć method

6:54i taką metodę remove musimy

6:58sobie tutaj dodać, ona będzie otrzymywała parametr, czyli właśnie ten id i stąd

7:03jak się być może domyślasz będziemy chcieli wyemitować zdarzenie do

7:07góry, więc napiszemy sobie this emit remove

7:11i podamy to id. No i teraz będziemy polegać na tym, że główna

7:15instancja będzie na każdym z takich elementów nasłuchiwać. Może jeszcze

7:19zróbmy taką rzecz, że połamiemy sobie to na wiele linii, nie jest to błędem

7:23a będzie nam łatwiej to wszystko przepisywać i przepiszemy zdarzenie remove,

7:27to które wyemitowaliśmy z dołu i tutaj też nazwiemy sobie

7:31je remove, te nazwy są przypadkowe, że one są takie same, tak mi

7:35jest wygodniej. Możesz to nazwać jak chcesz, bo na tym etapie tutaj wszystkie te nazwy

7:39i wszystkie te wartości odnoszą się do głównej aplikacji, która jest w tym miejscu, a więc

7:43jej metody musimy nazywać remove, ona

7:48też otrzyma id. Okej, ale ona ma już dostęp do tej tablicy bezpośrednio,

7:53więc będzie mogła znaleźć taki element i go

7:57usunąć i teraz problem, który pojawił jest taki, że mamy tą tablicę

8:01i chciałbym po niej przeliterować. Znaleźć taki obiekt, który ma id

8:06równa się na przykład 2. Zwrócić jego index, czyli to jest 01. No

8:10i metodą splice, tak jak to robiliśmy wcześniej usunąć ten element, więc trochę

8:14kodu musielibyśmy napisać. Z tego powodu podłączyłem biblioteka lodash, która

8:18nam to zadanie maksymalnie uprości i zrobimy

8:22coś takiego napiszemy i tak żeby znaleźć ten index i biblioteką lodash odwołamy

8:27się do find index. Mówimy gdzie chcemy szukać, czyli this users

8:31i teraz na podstawie jakich kryteriów. Tutaj można podać tablice mówiąc,

8:35że id ma być równe takie jak to przekazane id i zostanie

8:39nam zwrócony index właśnie tego elementu w tej tablicy, a kiedy

8:44już to będziemy mieli to this users splice. Pamiętaj, że splice jest to

8:48metoda opakowana przez Vue żeby Vue wiedziało kiedy z niej korzystamy. Będę

8:52chciał usunąć element pod indeksem index i od niego jeden element do przodu,

8:56czyli tak naprawdę ten element zaczynamy na indeksie i jeden element usuwamy. No

9:01i to powinno nam wystarczyć. Odświeżmy i

9:05teraz może tutaj zamknę i jak widzisz ja klikam na jakiś element,

9:09to on jest poprawnie usuwany. Emitujemy to zdarzenie i te elementy są

9:13usuwane. Tutaj moglibyśmy jeszcze zapytać o to co wcześniej, czyli v-if, jeżeli

9:18nie ma żadnych elementów i v-else, teraz już tego nie będę dodawał,

9:22ale tutaj można to zrobić, żeby taki element wtedy nie był widoczny, więc jak

9:26widzisz w ten sposób możemy się w ogóle komunikować i działa nam to poprawnie. Natomiast

9:30chciałem dodać jeszcze jedną ciekawa rzecz, mianowicie drugi przycisk do edycji, który jeśli

9:34klikniemy, to pojawi się tutaj pole gdzie będziemy mogli zmienić Jan oraz

9:38tutaj wiek i zrobimy to sobie z lekcji kolejnej.