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

Vue.js 2.5.x

0:00Dokończmy nasz praktyczny projekt. Mam nadzieję, że ci się podoba. Chciałbym

0:04sprawić, aby teraz to wszystko mogło być zamknięte w jeszcze jednym

0:08komponencie rodzicu. Zobaczmy, jak teraz wygląda struktura, jeżeli przejdziemy sobie do Vue,

0:12mamy root, czyli główną aplikację i kilka takich komponentów edu

0:16user natomiast chciałbym je móc zamknąć w taki sposób, żebyśmy w zasadzie

0:20do tej głównej aplikacji mogli od razu wstawić edu users, tak będzie się nazywał

0:25komponent. Nie chcę żeby tutaj była ta tabela, czyli główna aplikacja będzie

0:29mogła sobie w zasadzie zaimportować taki komponent kiedy będziemy pracowali z webpackiem i z ES6

0:34i wstawić go tutaj bez żadnego problemu. On wtedy nawet nie byłby globalny,

0:38tylko byłby importowane i tutaj na tej głównej aplikacji mielibyśmy tak jak Ci pokazywałam

0:43wcześniej klucz components, gdzie moglibyśmy te komponenty podawać i

0:47tagi jakie mają przyjmować. Natomiast dokładnie to będę chciał zrobić teraz,

0:51czyli stworzenie komponentów rodzica dla edu user. Będzie on

0:56globalny i nazwiemy go edu users, on

1:02nie będzie miał praktycznie żadnej logiki, ale będzie miał templatkę. No

1:09i co się znajdzie w tej templatce? Dokładnie to, co my tutaj czyli całe nasze table, ja stąd

1:14chcę wyciąć, a chcę tutaj wstawić edu users, w ten

1:18sposób, a to co było tam wstawimy sobie w to miejsce i od razu

1:22pod będziemy się pewnego problemu, mianowicie tego, że tutaj przeglądarka jeżeli

1:27widziała coś innego niż w tr, to wyrzucała to poza tabelkę. Jeżeli tutaj mamy taką

1:31templatkę w formie stringu to nie będzie z tym kłopotu, dlatego zamiast pisać tutaj is edu

1:35user możemy bezpośrednio skorzystać z edu user, po

1:39prostu i tutaj go domknąć, natomiast

1:43powiem ci jeszcze o jednej rzeczy. Jeżeli nic nie przekazujemy do wewnątrz komponentu i nie

1:47mam na myśli prop, ale dane, które będzie można tam później wstawiać, jeszcze ci

1:51tego nie pokazywałem, to możemy komponent od razu domknąć. Nie możemy

1:55tego zrobić jeżeli pracujemy poza taką templatką, czyli tutaj edu

1:59users, nie mogę domknąć od razu, bo będzie to kłopot. Przeglądarka tego poprawnie

2:03nie zrozumie, natomiast taki element uzna za custom'owy element i będzie wszystko w porządku. Dopiero

2:08później Vue to podmieni, więc jeżeli pracujemy w takiej templatce, można od

2:12razu taki element domknąć. Chyba żebyśmy do niego coś przekazywali, ale

2:16będziemy to robić później za pomocą tak zwanych slotów. Okej, czyli

2:20to jest pierwsza rzecz, którą chcemy zrobić, ale z tego co widzimy tutaj to

2:25iterujemy w tej templatce po users.

2:29No właśnie i nasz komponent edu users nie ma do tego dostępu,

2:34więc żebym miał do tego dostęp musimy mu to przekazać jako prop, czyli

2:38on musi przyjmować takie props'y users i w momencie gdzie

2:42wstawiamy ten komponent będziemy mu chcieli to przekazać, users równa się users.

2:47Jesteśmy teraz w głównej aplikacji, ona ma taką tablice

2:51users i to dokładnie tam przekażemy, więc ten komponent edu

2:55users wyrenderuje taką tablice właśnie z tymi elementami, taką

2:59tabelę w zasadzie i będzie wszystko okej. Tutaj przekazujemy

3:03user, tutaj nie powinno się nic zmienić, okej. Powinno

3:08być wszystko w porządku, oprócz tego, że tutaj mamy pewno metodę

3:12remove, ale o tym za moment. Spróbujmy odświeżyć. No właśnie

3:16i pojawił nam się błąd. Okej, jak widzisz mamy błąd

3:20i ostrzeżenie. Pierwsza rzecz to tutaj mówimy o kluczach, czyli

3:24to co ci mówiłem wcześniej, Vue chce żebyśmy korzystali z unikalnych

3:29kluczy. Warto z tego korzystać na pętlach, ja już wcześniej o tym mówiłem, czyli tutaj

3:33nasi użytkownicy mają unikalne id od 1 do 5,

3:37więc warto z tego skorzystać w tym miejscu, bindując key

3:41na wartość user id, okej, zobaczymy. Jeden

3:46błąd powinien zniknąć, tak też się stało i teraz pojawi nam się jeszcze jeden, więc

3:50zastanówmy się, w którym miejscu tutaj coś poszło nie tak, musimy

3:55się nad tym na chwilkę pochylić, edu users i przekazuje users. Tutaj

4:01przyjąłem to jako prop, więc powinno być w porządku, okej,

4:05tutaj zabrakło s, czyli props, teraz powinno być wszystko okej. Jeszcze

4:10jakiś błąd się pojawił, ale to ten którego się spodziewaliśmy. Zauważ, że teraz

4:14tak naprawdę w tym naszym komponencie mówimy, że nasłuchujemy na komponencie

4:19dziecko, dziecku edu user na zdarzenie remove, czyli kiedy ten komponent

4:23zrobi emit remove, to chcemy wywołać metodę remove,

4:27właśnie tutaj, ale takiej metody w tym miejscu nie mamy i nawet

4:32gdybyśmy mieli to musielibyśmy ją wywołać, a ona by musiała wyemitować

4:36zdarzenie remove jeszcze wyżej i dopiero tutaj musielibyśmy na nie nasłuchiwać. Mam

4:40nadzieję, że to widzisz i kiedy na nie byśmy nasłuchiwali dopiero w aplikacji moglibyśmy usunąć

4:44coś z tablicy. Więc im więcej mamy poziomów zagnieżdżenia, które widać w

4:48tym miejscu, zobacz, to tym więcej musimy emitować. Teraz stąd emitujemy

4:52jeden poziom wyżej i stąd musielibyśmy jeszcze wyżej, dlatego jest to świetne miejsce, żeby

4:56skorzystać z event bus'a, który ci wcześniej w jednej lekcji pokazywałem. Napiszmy

5:01sobie event równa się new Vue, okej i

5:05zasadzie możemy mu od razu dodać jakąś metodę, żeby nam się troszeczkę łatwiej

5:09z tym pracowało, methods. Napiszmy remove. Będzie to

5:13funkcja, która przyjmie id i ona

5:17zrobi to, co robiliśmy wcześniej. Tutaj nic nowego nie pokazuje, this emit remove id i

5:22teraz będziemy mogli w dowolnym miejscu w tym komponencie na przykład dziecka, po

5:26pierwsze to będziemy mogli usunąć, a w komponencie,

5:30w którym tak naprawdę klikamy, nie będziemy robić this

5:35emit tylko event, event, na

5:39nim nie będę już robił emit, bo właśnie mu dałem metodę, która się nazywa remove, więc

5:43bezpośrednio ją sobie wywołam i event remove. Wracamy

5:47w to miejsce. Ona jak się wykona to na tym evencie zrobimy emit remove i

5:52teraz wystarczy na to nasłuchiwać w aplikacji tutaj na samym dole. Zamiast metody

5:58remove, którą bezpośrednio wywoływaliśmy to w hook'u created, też już ci to pokazywałem,

6:02będziemy chcieli

6:06zrobić event, ten u góry, który jest on remove. Wykonaj

6:11this remove, czyli tak naprawdę tę naszą funkcję. Teraz powinno

6:15nam to działać i nieważne ile mamy poziomów zagnieżdżenia ty komponentów, te nazwy

6:20oczywiście remove można lepiej dostosować na przykład remove user i tak dalej,

6:24ale jak widzisz nie musimy nic przekazywać, jest wszystko w porządku. Sprawdźmy

6:28sobie teraz, jeżeli Anna Nowak będziemy chcieli zmienić

6:32Anna Nowak na przykład na Nowaczyk, zapisuje.

6:37Jak widzisz, zostało tutaj odzwierciedlone to bez żadnego event'u po prostu

6:41zmieniliśmy coś i setter się wykonał, więc Vue zrobił to za nas, ale

6:45w momencie kiedy usuwamy to już za pomocą naszej eventów będzie działać, więc

6:50tak mogłoby to wyglądać. Oczywiście możemy również tutaj dodać sobie możliwość edycji

6:54wieku. Zachęcam cię do tego żebyś to zrobił, w miejscu gdzie ja

6:58zrobiłem coś takiego, czyli tutaj gdzie dodaliśmy sobie input.

7:03Wystarczy, że identyczną rzecz zrobisz tutaj gdzie mamy user age i możesz

7:07dodać na przykład pole o typie number z modyfikatorem number. Ja

7:12teraz tego nie będę robił, ale polecam ci żebyś również spróbował sobie

7:16coś takiego zaimplementować. Logika identyczna jak tutaj, ale modyfikator number po to,

7:20że jeżeli coś zmienimy w takim polu to żeby było to zapisywane w obiekcie,

7:24w tym miejscu właśnie jako number. Jak widzisz to wszystko może nam się przydać. W tej

7:30lekcji zatem to wszystko mam nadzieję, że te trzy lekcje były dla ciebie ciekawe, że ten

7:34praktyczny projekt pokazał ci wiele technik. Natomiast nie kończymy jeszcze przygody

7:38z samymi komponentami, bo jest jeszcze trochę informacji, które chciałbym ci na ich temat przekazać.