Chybové zprávy

Formulář přidá objednávku, i když chybí jméno nebo není vybraný nápoj: objednávku pro nikoho. Než ji přidáte, zkontrolujte prvky formuláře, a když něco chybí, řekněte co, a to přímo u toho prvku.

V kurzu JavaScriptu jste každou zprávu vypsali do jejího prvku pomocí textContent a vyprázdnili ji, když bylo textové pole v pořádku. Ve Vue jsou zprávy v šabloně a ref říká, kdy se mají ukázat:

<script setup>
// ...
const ukazatChyby = ref(false);

function pridejObjednavku() {
    if (jmeno.value === "" || napoj.value === "") {
        ukazatChyby.value = true;
        return;
    }
    objednavky.value.push({
        id: dalsiId,
        jmeno: jmeno.value,
        napoj: napoj.value,
    });
    dalsiId++;
    jmeno.value = "";
    napoj.value = "";
    ukazatChyby.value = false;
}
</script>

<template>
    <form @submit.prevent="pridejObjednavku">
        <label for="jmeno">Vaše jméno</label>
        <input id="jmeno" v-model.trim="jmeno">
        <p v-if="ukazatChyby && jmeno === ''" class="chyba">
            Zadejte své jméno.
        </p>
        <!-- ... -->
    </form>
</template>

Když něco chybí, pridejObjednavku zprávy zapne a skončí příkazem return, ještě než cokoli přidá. Zpráva u jména se ukazuje, dokud je ukazatChyby true a jméno je prázdné. Jakmile tedy zákazník jméno napíše, zpráva zmizí, aniž by formulář odesílal znovu: jmeno se změnilo a Vue stránku aktualizovalo. Díky .trim je i jméno ze samých mezer "", takže i u něj se zpráva ukáže. A když se objednávka přidá, vrátí se ukazatChyby na false: formulář je zase prázdný, ale další zákazník zatím nic špatně neudělal.