Let's talk
  • [ Frontend ]
  • [ Vue.js ]
  • [ Tech ]

Obsługa formularzy wstępnie renderowanych i renderowanych po stronie serwera w Vue.js

Kaliop

Opublikowano 8 października 2018

Stosujemy różne techniki, aby zapewnić naszym użytkownikom jak najlepsze wrażenia (user experience). Dwiema z nich są prerendering (który będziemy nazywać PR) oraz server-side rendering (który będziemy nazywać SSR). Celem tych technik jest dostarczenie użytkownikowi wyrenderowanej zawartości, zanim główny komponent (lub komponenty) Vue zostanie zamontowany.

Uwaga: jeśli chcesz przejść bezpośrednio do końcowego rozwiązania, pomiń opis problemu i przewiń do końca artykułu.

Problem z formularzami

Formularz zawiera interaktywne elementy, takie jak pola tekstowe i przyciski. Jeśli obsługujesz formularz za pomocą Vue.js i korzystasz z PR lub SSR, możesz utracić wartości wpisane przez użytkownika w pola wyrenderowane wstępnie, w następujący sposób:

wstępnie wyrenderowany  formularz Vue.js na wolnym łączu

 

Zaczynamy pisać i nagle wszystko tracimy: fokus, wpisane wartości i tak dalej. Zobaczmy, dlaczego tak się dzieje. W naszym przykładzie użyjemy:

  • Pojedynczego pliku HTML zawierającego wstępnie wyrenderowany formularz 

  • Komponentu Vue.js zawierającego formularz, który zostanie zamontowany na tym wstępnie wyrenderowanym formularzu

 

Uwaga: Celowo zmieniony został tytuł wstępnie wyrenderowanego formularza, abyśmy mogli zobaczyć, kiedy komponent zostaje zamontowany. W przypadku PR i SSR powinien on być taki sam.

Kiedy użytkownik odwiedza Twoją stronę, najpierw pobiera plik HTML, który zawiera wstępnie wyrenderowany formularz. Przeglądarka wyświetla ten formularz. W międzyczasie pobierany jest plik JavaScript zawierający Twój komponent Vue. Podczas tego czasu (pobieranie + wykonywanie pliku JavaScript), użytkownik może wprowadzać wartości do wstępnie wyrenderowanego formularza.

Kiedy plik JavaScript zostanie wykonany, Twój komponent formularza zostaje zamontowany na miejscu wstępnie wyrenderowanego formularza. Dosłownie zastępuje on strukturę DOM. Poprzedni formularz zostaje usunięty z DOM, a wraz z nim dane wprowadzone przez użytkownika.

Płynniejsze przejście


To, czego chcemy dla naszych użytkowników, to przejrzyste przejście między wstępnie wyrenderowanym formularzem a nowym formularzem.
Możemy użyć hooków komponentu Vue.js, aby rozwiązać ten problem. Kiedy wyzwalany jest hook created, wstępnie wyrenderowany formularz wciąż znajduje się w DOM, a Ty masz już dostęp do danych swojego komponentu. To jest właśnie moment, w którym należy pobrać poprzednie wartości i wstrzyknąć je do danych komponentu.

 

Zobaczmy, jak to wygląda:

Pobieranie wartości wprowadzonych przez użytkownika

 

Lepiej. Ale wciąż tracimy fokus. Aby to naprawić, zamierzamy pobrać informację o tym, na czym skupiony jest użytkownik w hooku created, jednak będziemy mogli ustawić fokus na nowym polu dopiero wtedy, gdy komponent zostanie zamontowany, ponieważ nowe pole wejściowe jeszcze nie istnieje w DOM w momencie wyzwolenia hooka created.

 

A oto wynik:

Pobieranie wartości wprowadzonych przez użytkownika oraz przywracanie fokusu

Teraz, gdy komponent zostaje zamontowany, fokus oraz poprzednio wpisane wartości zostają zachowane

Ostateczne rozwiązanie jest już dostępne; możesz je wypróbować na wolnym łączu, korzystając z chrome dev tools network tab.

Podobne treści