Auswahllisten und Radiobuttons

Manche Fragen haben nur wenige Antworten: welches Getränk, welche Größe. Dafür haben Formulare Auswahllisten (select) und Radiobuttons, und v-model funktioniert bei beiden.

Ein select hat für jede Antwort eine option. Der Text einer Option ist das, was der Kunde sieht, und ihr value kommt ins Ref, wenn er sie wählt:

<select v-model="getraenk">
    <option disabled value="">Wähle ein Getränk</option>
    <option value="Espresso">Espresso, 2 €</option>
    <option value="Grüner Tee">Grüner Tee, 3 €</option>
</select>

Mit const getraenk = ref(""); steht die Liste am Anfang auf der ersten Option, deren Wert "" ist. Sie ist disabled, also kann der Kunde sie nicht wählen: Sie steht nur da, um zu sagen, was zu tun ist. Wähle Grüner Tee, und getraenk ist "Grüner Tee". Und es geht in beide Richtungen, wie immer: getraenk.value = "Espresso" im Skript wählt Espresso in der Liste.

Die Optionen können mit v-for aus einem Array kommen. Ihre Werte kommen dann mit :value auch aus den Daten:

<option v-for="artikel in menue" :key="artikel.id" :value="artikel.name">
    {{ artikel.name }}, {{ artikel.preis }} €
</option>

Radiobuttons sind Eingaben mit type="radio", eine für jede Antwort, und nur eine davon kann angekreuzt sein. Gib jedem seinen eigenen value und allen dasselbe v-model, und das Ref bekommt den Wert des angekreuzten:

<label>
    <input type="radio" value="klein" v-model="groesse">
    Klein
</label>
<label>
    <input type="radio" value="gross" v-model="groesse">
    Groß
</label>

Mit const groesse = ref("klein"); ist Klein am Anfang angekreuzt. Ein label um eine Eingabe macht auch ihren Text anklickbar.

Typischer Fehler:

• Ein Ref, das der Wert keiner Option ist. Mit ref("grüner tee") und value="Grüner Tee" zeigt die Liste gar keine Option an, bis der Kunde eine wählt: Groß- und Kleinschreibung zählen, so wie bei ===.