Zusammenfassung

In dieser Lektion hast du gelernt:

• v-model verbindet ein Feld in beide Richtungen mit einem Ref: Was getippt wird, kommt ins Ref, und eine Änderung des Refs zeigt sich im Feld. Es macht das, was :value und @input zusammen tun, und in der Vorlage schreibst du es ohne .value.
• Es funktioniert bei Textfeldern und bei einer textarea (nie {{ }} zwischen ihren Tags), bei einem select, dessen Ref den value der gewählten Option bekommt (:value, wenn die Optionen aus v-for kommen), und bei Radiobuttons, deren Ref den value des angekreuzten bekommt.
• Eine Checkbox mit einem Ref aus true oder false beantwortet Ja oder Nein. Mehrere Checkboxen mit demselben Array füllen es mit den Werten der angekreuzten.
• Der Wert eines Felds ist immer Text. .trim entfernt die Leerzeichen an Anfang und Ende, und .number macht ihn zu einer Zahl. Felder mit type="number" bekommen .number von selbst, und Radiobuttons und Checkboxen bekommen Zahlen mit :value.
• @submit.prevent an einem Formular führt deine Funktion aus, wenn das Formular abgeschickt wird. Ohne .prevent lädt die Seite neu, und die App fängt von vorn an.
• Um aus einem Formular etwas hinzuzufügen, fügst du dem Array ein Objekt mit einer eigenen id hinzu (push) und leerst dann die Felder, indem du ihre Refs setzt.
• Fehlermeldungen stehen in der Vorlage, mit v-if, und ein Ref sagt, wann sie erscheinen. :disabled verhindert, dass ein Button angeklickt wird, bis das Formular ausgefüllt ist.

In der nächsten Lektion, Berechnete Werte und Watcher, schreibst du Werte, die aus anderen Werten entstehen, wie die Summe einer Bestellung, nur einmal und führst Code aus, wann immer sich ein Wert ändert, zum Beispiel um die Bestellung zu speichern.

Aber zuerst eine kleine Übung: Das Café am Eck nimmt Tischreservierungen an. App.vue hat nur eine Überschrift, und das Formular schreibst du selbst. Ein Tipp: Halte die Meldung zur Reservierung in einem eigenen Ref, damit sie stehen bleibt, wenn das Namensfeld geleert wird. Und v-for über eine Zahl erzeugt die Optionen schnell.