Vue.js: Implementacja modelu na komponencie

Vue.js 2.5.x

0:00W tej lekcji pokażę ci super przydatną rzecz, którą po części już poznałeś,

0:04a jest to użycie dyrektywy v-model, ale na komponentach. Do tej

0:08pory używaliśmy jej na polach typu input czy na przykład select i pamiętasz,

0:13że to nam robiło Two Way Data Binding. Natomiast nie bez powodu w jednej z lekcji pokazywałem

0:17ci jak możemy sami zaimplementować v-model, czyli musimy

0:21nasłuchiwać na prop, która nazywa się value i ją otrzymamy

0:26i następnie musimy do góry wypychać czy emitować

0:30zdarzenie input lub zdarzenie change jeżeli był tam modyfikator lazy.

0:34Jeżeli tego nie pamiętasz wróć koniecznie do tamtej lekcji, natomiast dzięki

0:38temu, że w ten sposób działa v-model to możemy zaimplementować

0:42sobie v-model również na własnych komponentach i będę chciał ci to teraz pokazać. Mamy

0:47coś takiego. Fajnie to wygląda i fajnie to działa, chociaż to nie jest gotowy przykład. Te

0:51kontrolki tak naprawdę są tutaj dostępne dzięki Spectre CSS

0:56i jest to nic innego jak zwykły checkbox. My tutaj klikając klikamy tak

1:00naprawdę na ten label i to zaznacza nam również w ten checkbox pod

1:04spodem, więc to już w tym kursie widziałeś i wygląda to w następujący sposób, dokładnie

1:09w ten sposób, nie ma tutaj żadnego JavaScriptu. Natomiast chciałbym to teraz przepisać

1:13na komponent, żeby łatwiej można było z tego korzystać. Zauważ,

1:17że tutaj do tego inputa przypisuje sobie jeszcze v-model agreements terms, newsletter i blilling

1:22i to zrobiłem tutaj w formie takich obiektów, żeby nie mieć tych zmiennych

1:26czy tych właściwości bezpośrednio na data to zgrupowałem je sobie w obiekcie i mają

1:31one wartości false, dlatego te elementy domyślnie nie są zaznaczone.

1:35Natomiast ja chcę to teraz przepisać na komponent, dlatego

1:39stwórzmy sobie nowy globalny komponent, to znowu ci pokażę

1:43jak bardzo przydatne są komponenty, nazwiemy go edu switch

1:48i tutaj podamy jego obiekt konfiguracyjny oczywiście. Na początek potrzebujemy

1:52jak zwykle templatki, zapiszemy ją w ES6 z użyciem template stringu, żeby

1:57było prościej i nasza templatka będzie wyglądać następująco, będzie to cały taki

2:01form-group i teraz co będziemy chcieli tutaj w tej templatce zrobić. Po

2:06pierwsze będę chciał w tym miejscu umieścić slot i to nam

2:12się za moment przyda, ale skoro stworzyliśmy edu switch to może już sobie jeden

2:16taki switch osadźmy na stronie, żeby za moment móc zobaczyć w jaki sposób to działa. Będzie

2:21to edu switch, będziemy go mogli domknąć dzięki temu, że zrobiłem

2:25slota, to będzie można wpisać do niego jakąś treść i ja chcę wpisywać sobie

2:29taką treść. Może ja tego nie będę wycinał tylko skopiuje, wstawimy w

2:33to miejsce i to będzie wpadało do slota, czyli dokładnie w miejsce które nas

2:37interesuje. Natomiast teraz v-model na tym checkbox'ie, nie chcę żeby

2:41już się nam bindował, czy żeby nam uaktualniał

2:46agreements terms, bo agreement nie jest dostępne na tym komponencie,

2:50więc byłby błąd, tylko chcę sobie tutaj zrobić właściwość is checked,

2:54czyli jest zaznaczony. No i oczywiście musimy ją sobie dodać, więc zrobimy data.

2:58Pamiętaj, że przy komponentach to jest funkcja, która zwraca obiekt, a nie

3:02obiekt bezpośrednio i tutaj zrobimy sobie is checked, domyślnie

3:07właśnie, jaka powinna być jego wartość, czy false czy true. Otóź będę

3:12chciał żeby domyślnie jego wartość była taka jak przekazana w prop this

3:17value. To już też robiliśmy, więc musimy

3:21mieć props i taką prop, która nazywa

3:25się value. Dodatkowo ja chciałbym ją zwalidować, żeby nie tylko ją tutaj przejmować,

3:29ale żeby ona również miała wartość boolean, żebyśmy mieli pewność, że zawsze

3:34to będzie działać poprawnie, chociaż w przypadku  v-model, który za moment dodamy, tak czy

3:38siak powinno, ale przypomnę ci przy okazji, że jest coś takiego jak walidacja, więc

3:42możemy powiedzieć, że interesuje nas przyjęcie prop, która nazywa się value i

3:46ma być o typie boolean, czyli true lub false, okej,

3:51czyli teraz po kliknięciu w ten komponent, jeżeli ten input się zaznaczy, to

3:55będzie zmieniana wartość is checked, która jest tutaj. Natomiast domyślnie na samym początku ona

3:59będzie miała taką wartość jak przekazana w prop value i teraz mógłbyś

4:03mnie zapytać, w którym miejscu tutaj przekazujemy prop value. Musiałbym to zrobić w

4:07ten sposób, prawda. Natomiast my chcemy zrobić coś innego. Tutaj na zewnątrz chcę

4:11napisać v-model równa się i to co mieliśmy w tym miejscu agreements terms i

4:16automatycznie v-model co pokazywałem ci w lekcji gdzie implementowaliśmy własny

4:21v-model, on działa także właśnie do takiego komponentu, czy do pola

4:25input, które mieliśmy wcześniej w tym kursie, przekazuje prop o nazwie value i

4:29właśnie dokładnie dlatego tutaj ją przyjmujemy i dzięki

4:33temu początkową wartość is checked mogę ustawić na this value. Przy

4:37okazji jeszcze raz ci przypomnę, że this value tutaj można użyć, bo jesteśmy wewnątrz funkcji,

4:41a tutaj bezpośrednio na takiej na przykład instancji nie

4:45można sobie napisać this i odwołać się do jakiegoś props, które mogłoby

4:49być tutaj przekazywane, okej i w zasadzie tutaj prop i tak nie może

4:53być przekazane, bo jest to główna instancja, ale pamiętaj, że tutaj do this jakbyśmy

4:57się odwołali, to nigdy się to nie odwoła do tej instancji, bo ona jeszcze nie jest gotowa,

5:02nie jest utworzona. Natomiast w komponentach tak zrobić można. Czyli wracając do tego,

5:06jeżeli to przepisze v-model do mojego customowego komponentu, to domyślnie

5:10ten v-model przekaże mi właściwość właśnie value i stąd ja ją

5:14przyjąłem i powinno nam to działać. Zobaczmy, mamy

5:18tutaj akceptuję regulamin, czyli slot zadziałał. Widzę, że mamy jakiś problem,

5:22że tutaj kropka jest zbędna, okej, no i to

5:26co jest ważne, to gdybym zmienił tutaj terms na true to true

5:32powinno zostać przekazane też do mojego komponentu i to powinno zostać odzwierciedlone, więc

5:36tak też się stało, czyli połowa pracy, można powiedzieć, że za

5:40nami. Będę chciał teraz sobie powiedzieć

5:44to trzykrotnie, zobacz jak fajnie będziemy mogli tego używać wielokrotnie, a kodu

5:49będzie tak naprawdę dużo mniej. Tutaj mieliśmy akceptuję regulamin, więc kolejny

5:53chciałbym tutaj zrobić, zapisz mnie na newsletter i tutaj to zaktualizujemy

5:57i ostatni obciążaj moje

6:01konto comiesięcznie i to sobie zrobimy na billing,

6:05okej no i te trzy będę mógł usunąć, a zatem jak

6:12widzisz działa to w taki sposób tylko, że mamy pewien problem, bo to jest dopiero połowa

6:16pracy za nami. Jeżeli przejdziemy tutaj do root. Mamy te agreements, w momencie jak

6:21kliknę na taki element, nie zmienia się to w tym miejscu. Wewnątrz się zmieniło

6:25i możemy to potwierdzić klikając tutaj edu switch i widzimy is checked ma wartość

6:29true, mogę ją zmienić na false i tak dalej. Natomiast chodzi o to,

6:33że połowę pracy wykonaliśmy w ten sposób, że v-model przekazuje

6:38nam automatycznie value, która nazywa się prop, która nazywa się value.

6:42Natomiast on oczekuje to co robiliśmy w lekcji jakiego implementowaliśmy,

6:46że do góry zostanie wypchnięte zdarzenie o nazwie input. No

6:50właśnie, więc tutaj powinniśmy takie zdarzenie emitować. Za każdym razem kiedy zmieni

6:54się is checked, czyli w zasadzie teoretycznie można by było

6:58tutaj do tego inputa przypisać zdarzenie change

7:03i wtedy emitować takie zdarzenie, ale można to zrobić również inaczej za

7:07pomocą watcher'a, więc dodajmy sobie tutaj watch, będziemy

7:12chcieli obserwować właściwość is checked, czyli kiedy ona się zmieni,

7:16pamiętasz, że tutaj dostaniemy starą i nową wartość, możemy

7:20je przyjąć, ale równie dobrze możemy się odwołać do tej wartości bezpośrednio, to

7:24kiedy ona się zmieni będziemy chcieli wyemitować zdarzenie emit o nazwie

7:28input i będziemy chcieli przekazać wartość, czyli this

7:33is checked lub tak jak wspomniałem tutaj można

7:37przyjąć to jako parametr i przekazać w tym miejscu, czyli za każdym razem kiedy ja klikam

7:41tutaj, na input'ie wartość się zmienia, widzieliśmy że wewnątrz się zmienia. Na

7:46zewnątrz wyemitujemy zdarzenie i nie musimy na to zdarzenie tutaj nasłuchiwać za pomocą

7:50input, bo wiemy że v-model robi to za nas. Dokładnie to ci pokazywałem

7:54we wcześniejszej lekcji i zasadzie powinno to zadziałać. Zaznaczam,

7:59na edu switch się zmieniło na true i na root zmieniło się na true

8:03i każdy inny można zaznaczyć i odznaczyć i jak widzisz to się tutaj

8:07aktualizuje, więc w ten sposób stworzyliśmy sobie naprawdę fajny

8:11reużywany komponent, który możemy w dowolnym miejscu osadzić i możemy

8:16mu przypisać v-model mówiąc, że chcemy u nas w tej naszej głównej aplikacji

8:20aktualizować pewne dane na podstawie tego switch'a. Możemy

8:24również przekazać tekst, który wpada w odpowiednie miejsce a reszta wyglądu nas tak naprawdę

8:28nie interesuje, on jest zawarty w tym miejscu. Jak zatem widzisz niewiele

8:33kodu musieliśmy napisać, a możemy wielokrotnie używać takiego switch'a. Oczywiście

8:37można byłoby go używać pętli i tak dalej tak jak robiliśmy to do tej pory,

8:41okej. To zatem wszystko w tej lekcji. Mam nadzieję, że ten

8:45przykład również ci się podobał i że będziesz pamiętał, że możesz w ten sposób tworzyć

8:49własne komponenty, które korzystają z v-model.