Textfelder und v-model

Mit Formularen sagen Kunden einer App, was sie wollen: Sie tippen einen Namen, wählen ein Getränk, setzen ein Häkchen. In dieser Lektion baust du das Bestellformular des Cafés am Eck, eine Art von Feld nach der anderen, und schickst es dann ab.

Mit dem, was du aus der Lektion State und Ereignisse kennst, könntest du den Text eines Felds schon in einem Ref speichern: :value bringt das Ref ins Feld, und @input bringt jede Änderung des Feldtexts zurück ins Ref:

<script setup>
import { ref } from "vue";

const name = ref("");

function nameAktualisieren(event) {
    name.value = event.target.value;
}
</script>

<template>
    <input :value="name" @input="nameAktualisieren">
    <p>Bestellung für {{ name }}</p>
</template>

Ein Formular hat viele Felder, und für jedes beide Hälften zu schreiben wird lang. Die Direktive v-model erledigt beides:

<input v-model="name">
<p>Bestellung für {{ name }}</p>

Eine Funktion brauchst du nicht. Tippe Anna, und name ist "Anna", also zeigt der Absatz Bestellung für Anna. Es funktioniert auch andersherum: Wenn das Skript das Ref ändert, etwa mit name.value = "", zeigt das Feld den neuen Wert, hier nichts. Das Feld und das Ref enthalten immer denselben Text, deshalb heißt das Two-Way-Binding (Bindung in beide Richtungen).

Eine textarea, ein Feld für längeren Text über mehrere Zeilen, funktioniert genauso: <textarea v-model="notiz"></textarea>. Setze {{ notiz }} nicht zwischen ihre Tags: Das schreibt die Notiz nur beim Start der Seite ins Feld, und was getippt wird, kommt nie ins Ref.

Typische Fehler:

• v-model auf einer Variablen, die kein Ref ist. Mit const name = ""; läuft die Seite nicht, und die rote Leiste zeigt v-model cannot be used on a const binding because it is not writable. Mit let kannst du tippen, aber die Seite ändert sich nicht, so wie bei einem einfachen let in der Lektion State und Ereignisse.
• v-model="name.value". In der Vorlage schreibst du ein Ref ohne .value, und v-model macht dabei keine Ausnahme. Beim Tippen steht dann TypeError: Cannot create property 'value' on string '' in der Konsole.