# Forms в Vue

poster
В этом видео мы с вами разберем, как использовать формы в Vue. До этого мы с вами уже разбирали v-model и submit эвент на форме. Поэтому в этом уроке мы разберем radio button и select.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом видео мы с вами разберем, как использовать формы в 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'
  }
}

В этом случае Германия будет выбрана, как страна по умолчанию.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Kos Key
6 лет назад
а как также красиво в цикле вывести value для select?
monsterlessons
6 лет назад
data: { reasons: {"select1":"Select 1","select2":"Select 2","select3":"Select 3"} } <select> <option v-for="(reason, key) in reasons" :value="key" :key="key"> {{reason}} </option> </select>
Kos Key
6 лет назад
спасибо, а зачем :key="key" ?
monsterlessons
6 лет назад
Чтобы знать при перерендере коллекции какие именно элементы были изменены.
Kos Key
6 лет назад
Вот эта часть теперь вообще стала непонятной. А можно сделать передачу в родитель через emit по select? methods отрабатывает (console.log), а this.$emit('onSelect') нет
monsterlessons
6 лет назад
Так сложно сказать, нужно дебажить. Обычно достаточно эмита и подписки login () { this.$emit('login', { email: this.email, password: this.password }) } <loginForm @login='onLogin' /> как я показывал в этом уроке https://monsterlessons.com/project/lessons/peredaem-dannye-iz-child-v-parent-v-vue
Moe Green
6 лет назад
Подскажите, я правильно понимаю ситуацию, что в USA/Europe проснулся определенный интерес к Vue.js? И у Вас появилась серия по Vue тоже не случайно, я думаю? )
monsterlessons
6 лет назад
Определенный интерес есть, но если вы ищете работу, то проще найти на React/Angular5/Angular1/Backbone.