Fehlermeldungen

Das Formular fügt auch dann eine Bestellung hinzu, wenn es keinen Namen gibt oder kein Getränk gewählt ist: eine Bestellung für niemanden. Prüfe die Felder, bevor du sie hinzufügst, und sage direkt am Feld, was fehlt, wenn etwas fehlt.

Im JavaScript-Kurs hast du jede Meldung mit textContent in ihr Element geschrieben und sie geleert, sobald das Feld stimmte. In Vue stehen die Meldungen in der Vorlage, und ein Ref sagt, wann sie erscheinen:

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

function bestellungHinzufuegen() {
    if (name.value === "" || getraenk.value === "") {
        fehlerAnzeigen.value = true;
        return;
    }
    bestellungen.value.push({ id: naechsteId, name: name.value, getraenk: getraenk.value });
    naechsteId++;
    name.value = "";
    getraenk.value = "";
    fehlerAnzeigen.value = false;
}
</script>

<template>
    <form @submit.prevent="bestellungHinzufuegen">
        <label for="name">Dein Name</label>
        <input id="name" v-model.trim="name">
        <p v-if="fehlerAnzeigen && name === ''" class="fehler">Gib deinen Namen ein.</p>
        <!-- ... -->
    </form>
</template>

Wenn ein Feld leer ist, schaltet bestellungHinzufuegen die Meldungen ein und endet mit return, bevor etwas hinzugefügt wird. Die Meldung zum Namen erscheint, solange fehlerAnzeigen true ist und der Name leer ist. Sobald der Kunde einen Namen tippt, verschwindet die Meldung also, ohne dass das Formular erneut abgeschickt wird: name hat sich geändert, und Vue hat die Seite aktualisiert. Dank .trim ist auch ein Name aus lauter Leerzeichen "", also bekommt er die Meldung ebenfalls. Und sobald eine Bestellung hinzugefügt ist, geht fehlerAnzeigen zurück auf false: Die Felder sind wieder leer, aber der nächste Kunde hat noch nichts falsch gemacht.