В этом видео мы с вами разберем, как использовать формы в Vue. До этого мы с вами уже разбирали v-model и submit эвент на форме. Поэтому в этом уроке мы разберем radio button и select.
Представим, что нам нужно выбрать в форме, как часто будет происходить событие. Каждый день, раз в неделю или раз в месяц. Давайте добавим 3 radio buttonа для этого.
App.vue
<div>
<label>Every day</label>
<input type='radio' value='everyDay' />
</div>
<div>
<label>Once per week</label>
<input type='radio' value='oncePerWeek' />
</div>
<div>
<label>One per month</label>
<input type='radio' value='oncePerMonth' />
</div>
Если мы посмотрим в браузер, то это три независимых элемента. Нас же интересует, чтобы в форме можно было выбирать только одно значение. Для этого достаточно добавить один и тот же v-model на все три элемента.
App.vue
<div>
<label>Every day</label>
<input
type='radio'
value='everyDay'
v-model='frequency'
/>
</div>
<div>
<label>Once per week</label>
<input
type='radio'
value='oncePerWeek'
v-model='frequency'
/>
</div>
<div>
<label>One per month</label>
<input
type='radio'
value='oncePerMonth'
v-model='frequency'
/>
</div>
<div>
{{frequency}}
</div>
Если мы посмотрим в браузер, то у нас может быть выбрано только одно значение и оно сразу же заносится в переменную. Если мы хотим, чтобы одно из значений было выбрано по умолчанию, то достаточно задать в data значение этой переменной.
App.vue
data () {
return {
frequency: 'oncePerMonth'
}
}
Как мы видим, все работает.
Что же насчет селектов? Так же просто их использовать в Vue, как и radio button? Впринципе да.
Для начала давайте добавим массив стран в data и будем выводить его в select.
App.vue
data () {
return {
countries: [
'Austria',
'Sweden',
'Australia',
'Canada',
'Netherlands',
'Germany'
]
}
}
Мы добавили массив стран и теперь нам нужно его отрендерить с помощью v-for внутри select.
App.vue
<select>
<option v-for='country in countries'>
{{country}}
</option>
</select>
Если мы посмотрим в браузер, то наш селект сразу же заполнен данным. То есть обычно цикла достаточно, чтобы отрендерить option. Нам не нужно именить никаких дополнительных знаний. Но как теперь получить выбранное значение из select?
Давайте добавим дополнительную переменную selectedCountry.
App.vue
data () {
return {
...
selectedCountry: ''
}
}
Теперь нам достаточно указать v-model на нашем select, чтобы выбраное значение сразу было доступно.
App.vue
<select v-model='selectedCountry'>
<option v-for='country in countries'>
{{country}}
</option>
</select>
Selected country: {{selectedCountry}}
Теперь мы видим, что значение по умолчанию у нас пустое, а когда мы выбираем страну, то переменная selectedCountry присваивается.
Если же нам нужно указать значение по умолчанию, то достаточно просто изменить data.
App.vue
data () {
return {
...
selectedCountry: 'Germany'
}
}
В этом случае Германия будет выбрана, как страна по умолчанию.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.