Выпадающие списки и переключатели

У некоторых вопросов всего несколько ответов: какой напиток, какого размера. Для них в формах есть выпадающие списки (select) и переключатели, и v-model работает с обоими.

В select для каждого ответа есть option. Текст варианта видит посетитель, а его value попадает в реф, когда он выбран:

<select v-model="drink">
    <option disabled value="">Выберите напиток</option>
    <option value="Эспрессо">Эспрессо, €2</option>
    <option value="Зелёный чай">Зелёный чай, €3</option>
</select>

С const drink = ref(""); список стоит на первом варианте, значение которого — "". Он disabled, поэтому выбрать его нельзя: он нужен только для подсказки. Выберите «Зелёный чай» — и drink станет "Зелёный чай". И, как всегда, связь двусторонняя: drink.value = "Эспрессо" в скрипте выбирает «Эспрессо» в списке.

Варианты могут браться из массива через v-for. Тогда и значения берутся из данных, через :value:

<option v-for="item in menu" :key="item.id" :value="item.name">
    {{ item.name }}, €{{ item.price }}
</option>

Переключатели — это поля ввода с type="radio", по одному на каждый ответ, и отмечен может быть только один. Дайте каждому своё value, а всем одинаковый v-model — и реф получит значение отмеченного:

<label>
    <input type="radio" value="small" v-model="size">
    Маленький
</label>
<label>
    <input type="radio" value="large" v-model="size">
    Большой
</label>

С const size = ref("small"); сначала отмечен «Маленький». label вокруг поля делает кликабельным и его текст.

Типичная ошибка:

• Реф, который не равен значению ни одного варианта. С ref("зелёный чай") и value="Зелёный чай" список не показывает ни одного варианта, пока посетитель что-нибудь не выберет: заглавные и строчные буквы различаются, как и при сравнении через ===.