Odeslání formuláře

Zatím stránka jen ukazovala, co kdo napsal nebo vybral. Teď zákazník objednávku odešle. Stejně jako v kurzu JavaScriptu dáte prvky, které k sobě patří, do formuláře form a ten dostane událost submit, když někdo klikne na jeho tlačítko nebo stiskne Enter v některém z jeho textových polí. Ve Vue ji obsloužíte pomocí @submit na formuláři:

<form @submit.prevent="pridejObjednavku">
    <label for="jmeno">Vaše jméno</label>
    <input id="jmeno" v-model.trim="jmeno">
    <button>Objednat</button>
</form>

Každé tlačítko button ve formuláři ho odešle, i když nemá type="submit". A pamatujte na výchozí akci prohlížeče: když se formulář odešle, prohlížeč stránku načte znovu. Aplikace ve Vue pak začne od začátku: každý ref má zase svou počáteční hodnotu a seznam objednávek je prázdný. Modifikátor .prevent za vás zavolá event.preventDefault(), ještě než se spustí vaše funkce. Vyzkoušejte si, co se stane bez něj: formulář v tomto cvičení zatím nemá @submit, takže napište jméno, klikněte na Objednat a sledujte, jak stránka začne znovu.

Přidání objednávky. Funkce udělá z refů objekt a přidá ho do pole, které ukazuje v-for:

const objednavky = ref([]);
let dalsiId = 1;

function pridejObjednavku() {
    objednavky.value.push({
        id: dalsiId,
        jmeno: jmeno.value,
        napoj: napoj.value,
    });
    dalsiId++;
    jmeno.value = "";
    napoj.value = "";
}

Každá objednávka dostane vlastní id pro svůj :key, a to z dalsiId, které se po každé objednávce zvětší o jedna. dalsiId je obyčejné let, ne ref: stránka ho nikdy neukazuje, takže Vue nemusí vědět, kdy se změní. Poslední dva řádky připraví formulář pro dalšího zákazníka: díky obousměrnému propojení vyprázdnění refů vyprázdní i formulář.