Shrnutí

V této lekci jste se naučili, že:

• v-model propojí prvek formuláře s refem oběma směry: co uživatel napíše, jde do refu, a změna refu se ukáže v prvku. Udělá totéž co :value a @input dohromady a v šabloně se píše bez .value.
• Funguje na textová pole a na textarea (do ní nikdy nedávejte {{ }}), na select, jehož ref dostane value vybrané možnosti (:value, když možnosti vznikají pomocí v-for), a na přepínače, jejichž ref dostane value toho zaškrtnutého.
• Zaškrtávací políčko s refem true, nebo false odpovídá ano, nebo ne. Víc políček se stejným polem ho naplní hodnotami těch zaškrtnutých.
• Hodnota textového pole je vždycky text. .trim odstraní mezery na jeho začátku a konci a .number z něj udělá číslo. Textová pole s type="number" dostanou .number sama a přepínače a zaškrtávací políčka dostanou čísla přes :value.
• @submit.prevent na formuláři spustí vaši funkci, když se formulář odešle. Bez .prevent se stránka načte znovu a aplikace začne od začátku.
• Když z formuláře přidáváte položku, přidejte do pole objekt s vlastním id a pak prvky formuláře vyprázdněte nastavením jejich refů.
• Chybové zprávy jsou v šabloně s v-if a ref říká, kdy se mají ukázat. :disabled nedovolí na tlačítko kliknout, dokud není formulář vyplněný.

V další lekci, Vypočítané hodnoty a sledování, napíšete hodnotu vytvořenou z jiných hodnot jen jednou, třeba celkovou cenu objednávky, a spustíte kód pokaždé, když se nějaká hodnota změní, například aby se objednávka uložila.

Nejdřív si ale vše procvičte: Kavárna Na Rohu přijímá rezervace stolů. App.vue má jen nadpis a formulář napíšete sami. Tip: zprávu o rezervaci mějte ve vlastním refu, aby zůstala, i když se textové pole se jménem vyprázdní. A možnosti seznamu rychle vytvoří v-for přes číslo.