Das Formular abschicken

Bisher haben die Felder nur gezeigt, was getippt wurde. Jetzt schickt der Kunde die Bestellung ab. Wie im JavaScript-Kurs kommen Felder, die zusammengehören, in ein form, und das Formular bekommt das Ereignis submit, wenn sein Button angeklickt oder in einem seiner Textfelder die Eingabetaste gedrückt wird. In Vue behandelst du es mit @submit am Formular:

<form @submit.prevent="bestellungHinzufuegen">
    <label for="name">Dein Name</label>
    <input id="name" v-model.trim="name">
    <button>Bestellen</button>
</form>

Ein button in einem Formular schickt es ab, auch ohne type="submit". Und denk an die Standardaktion des Browsers: Wenn ein Formular abgeschickt wird, lädt der Browser die Seite neu. Eine Vue-App fängt dann von vorn an: Jedes Ref hat wieder seinen Startwert, und die Liste der Bestellungen ist leer. Der Modifikator .prevent ruft event.preventDefault() für dich auf, bevor deine Funktion läuft. Sieh dir an, was ohne ihn passiert: Das Formular in dieser Übung hat noch kein @submit, also tippe einen Namen, klicke auf Bestellen und sieh zu, wie die Seite von vorn anfängt.

Die Bestellung hinzufügen. Die Funktion macht aus den Refs ein Objekt und fügt es dem Array hinzu, das v-for anzeigt:

const bestellungen = ref([]);
let naechsteId = 1;

function bestellungHinzufuegen() {
    bestellungen.value.push({ id: naechsteId, name: name.value, getraenk: getraenk.value });
    naechsteId++;
    name.value = "";
    getraenk.value = "";
}

Jede Bestellung bekommt ihre eigene id für ihren :key, aus naechsteId, das nach jeder Bestellung um eins steigt. naechsteId ist ein einfaches let, kein Ref: Die Seite zeigt es nie an, also muss Vue nicht wissen, wann es sich ändert. Die letzten beiden Zeilen machen das Formular für den nächsten Kunden bereit: Dank Two-Way-Binding leert das Leeren der Refs auch die Felder.