Unetway

Работа с формами

Типичное использование

Для двунаправленного связывания данных с элементами форм можно использовать директиву v-model. В зависимости от типа элемента автоматически выбираеся способ обновления элемента.

v-model игнорирует атрибуты value, checked или selected на любых элементах форм. Данные экземпляра будут рассматриваться как источник истины. Начальное значение нужно объявить на стороне JavaScript, внутри опции data компонента.

Текст

<input v-model="message" placeholder="отредактируй меня">
<p>Введённое сообщение: {{ message }}</p>

Многострочный текст

<span>Введённое многострочное сообщение:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="введите несколько строчек"></textarea>

Внутри тега textarea интерполяция (<textarea>{{text}}</textarea>) не будет работать. Для этого нужно использовать директиву v-model

Чекбоксы

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Один чекбокс, привязанный к boolean значению:

<div id="example-3" class="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Отмеченные имена: {{ checkedNames }}</span>
</div>

Множество чекбоксов, привязанных к одному массиву: 

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Радиокнопки

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Выбрано: {{ picked }}</span>

Выпадающие списки

Выбор одного варианта из списка:

<select v-model="selected">
  <option disabled value="">Выберите один из вариантов</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Выбрано: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

Если начальное значение выражения v-model не соответствует вариантам списка, элемент <select> отобразится в “невыбранном” состоянии. 
В iOS пользователь не сможет выбрать первый элемент, так как iOS не сгенерирует событие change. Рекомендуется предоставлять отключённый вариант выбора с пустым значением value.

Выбор нескольких вариантов из списка (с привязкой к массиву):

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Выбрано: {{ selected }}</span>

Динамическое отображение опций с помощью v-for:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Выбрано: {{ selected }}</span>

Связывание значений

Для радиокнопок, чекбоксов и выпадающих списков выбора в качестве параметров v-model обычно указываются статические строки:

<!-- `picked` получает строковое значение "a" при клике -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` может иметь значение true или false -->
<input type="checkbox" v-model="toggle">

<!-- `selected` при выборе становится равным строке "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Для связывания значений с динамическим свойством экземпляра Vue, используйте v-bind

Чекбокс

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// если чекбокс выбран:
vm.toggle === 'yes'
// если чекбокс сброшен:
vm.toggle === 'no'

Радиокнопки

<input type="radio" v-model="pick" v-bind:value="a">
// если отмечено:
vm.pick === vm.a

Списки выбора

<select v-model="selected">
  <!-- инлайновый объект с данными -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// когда выбрано:
typeof vm.selected // => 'object'
vm.selected.number // => 123

Модификаторы

.lazy

По умолчанию, v-model синхронизирует ввод с данными на каждое событие input. Можно указать модификатор lazy, чтобы вместо этого использовать для синхронизации события change:

<!-- синхронизируется после "change", а не "input" -->
<input v-model.lazy="msg" >

.number

Чтобы автоматически привести введенные пользователем данные к числу, нужно добавить модификатор number:

<input v-model.number="age" type="number">

.trim

Чтобы автоматически обрезать пробелы в начале и в конце введённой строки, используйте модификатор trim:

<input v-model.trim="msg">

Использование v-model с компонентами

Компоненты Vue позволяют создавать пользовательские аналоги элементов ввода с  настраиваемым поведением, которые тоже могут работать с директивой v-model.