Rozbalovací seznamy a přepínače

Na některé otázky je jen pár odpovědí: jaký nápoj, jak velký. Pro ty mají formuláře rozbalovací seznamy (select) a přepínače (radio buttons) a v-model funguje na obojí.

select má pro každou odpověď jednu možnost, prvek option. Text možnosti je to, co vidí zákazník, a její value je to, co se dostane do refu, když ji vybere:

<select v-model="napoj">
    <option disabled value="">Vyberte nápoj</option>
    <option value="Espresso">Espresso, 55 Kč</option>
    <option value="Zelený čaj">Zelený čaj, 60 Kč</option>
</select>

S const napoj = ref(""); seznam začne na první možnosti, jejíž hodnota je "". Je disabled, takže ji zákazník vybrat nemůže: je tam jen proto, aby řekla, co dělat. Vyberte Zelený čaj a v napoj je "Zelený čaj". A jako vždycky to funguje obousměrně: napoj.value = "Espresso" ve skriptu vybere v seznamu Espresso.

Možnosti můžou vzniknout z pole pomocí v-for. Jejich hodnoty pak taky pocházejí z dat, přes :value:

<option v-for="polozka in nabidka" :key="polozka.id" :value="polozka.nazev">
    {{ polozka.nazev }}, {{ polozka.cena }} Kč
</option>

Přepínače jsou prvky input s type="radio", jeden pro každou odpověď, a zaškrtnutý může být jen jeden z nich. Dejte každému vlastní value a všem stejný v-model a ref dostane hodnotu toho zaškrtnutého:

<label>
    <input type="radio" value="malá" v-model="velikost">
    Malá
</label>
<label>
    <input type="radio" value="velká" v-model="velikost">
    Velká
</label>

S const velikost = ref("malá"); je na začátku zaškrtnutá Malá. Prvek label kolem přepínače zařídí, že se dá kliknout i na jeho text.

Typická chyba:

• Ref, jehož hodnotu nemá žádná možnost. S ref("zelený čaj") a value="Zelený čaj" seznam neukazuje vůbec žádnou možnost, dokud zákazník nějakou nevybere: na velkých a malých písmenech záleží, stejně jako u ===.