Продвинутая работа с формами в фреймворке Vue

Сейчас мы с вами научимся работе с текстареа, чекбоксами, радиокнопочками и селектами в фреймворке Vue.

Textarea
Работа с textarea происходит абсолютно также, как и с инпутами - через директиву v-model:

let app = new Vue({
el: '#app',
data: {
message: 'hello', // начальное значение в textarea
},
});
<div id="app">
<textarea v-model="message"></textarea>
<p>Введенное сообщение: {{ message }}</p>
</div>
Вот такая вставка переменной: <textarea>{{text}}</textarea> - не будет работать. Используйте вместо нее директиву v-model.

Чекбоксы
Давайте теперь посмотрим, как происходит работа с чекбоксами.

Пусть у нас есть чекбокс, к которому через v-model привязано свойство checked:

<div id="app">
<input type="checkbox" v-model="checked">
</div>
Если чекбокс отмечен - свойство checked будет иметь значение true, а если не отмечен - то false.

Чтобы убедится в этом, можно вывести значение свойства checked на экран, вот так:

<div id="app">
<input type="checkbox" v-model="checked">
<p>Состояние: {{ checked }}</p>
</div>
Не забудьте о том, что при использовании любого свойства, в нашем случае checked оно должно быть объявлено в data.

В нашем случае checked может иметь значение true или false и будет задавать начальное состояние чекбокса: если в checked лежит true - то чекбокс будет по умолчанию отмечен, а если false - то не отмечен.

Итак, реализуем описанное и запустим:

let app = new Vue({
el: '#app',
data: {
checked: true,
},
});
<div id="app">
<input type="checkbox" v-model="checked">
<p>Состояние: {{ checked }}</p>
</div>
Запустите этот код и понажимайте на чекбокс - вы увидите, как состояние чекбокса одновременно меняется в абзаце под нашим чекбоксом.

Чекбоксы и тернарный оператор
Пусть мы хотим в нашем абзаце выводить не true/false, а что-то более осмысленное в зависимости от состояния чекбокса.

В этом нам поможет тернарный оператор. Давайте с его помощью будем выводить 'отмечен', если в checked лежит true, и 'не отмечен', если там false:

<div id="app">
<input type="checkbox" v-model="checked">
<p>Состояние: {{ checked ? 'отмечен' : 'не отмечен' }}</p>
</div>
let app = new Vue({
el: '#app',
data: {
checked: true,
},
});

Чекбоксы и массив
Пусть у нас есть группа чекбоксов. Можно сделать так, чтобы значение атрибута value всех отмеченных чекбоксов складывалось в массив.

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

let app = new Vue({
el: '#app',
data: {
lang: [], // значение по умолчанию - массив
},
});
<div id="app">
<input type="checkbox" v-model="lang" value="html">
<input type="checkbox" v-model="lang" value="css">
<input type="checkbox" v-model="lang" value="js">
<p>Содержимое массива: {{ lang }}</p>
</div>
Запустите этот код и понажимайте на чекбоксы - вы увидите, как в абзаце выводится содержимое атрибутов value отмеченных чекбоксов.

Радиокнопочки
Давайте теперь рассмотрим работу с радиокнопочками.

Пусть у нас есть набор радиокнопочек:

<input name="radio" type="radio">
<input name="radio" type="radio">
<input name="radio" type="radio">
Напишем каждой из них директиву v-model и привяжем к ней свойство type:

<input name="radio" type="radio" v-model="type">
<input name="radio" type="radio" v-model="type">
<input name="radio" type="radio" v-model="type">
Дадим также каждой из них свой value:

<input name="radio" type="radio" v-model="type" value="один">
<input name="radio" type="radio" v-model="type" value="два">
<input name="radio" type="radio" v-model="type" value="три">
Если запустить подобный код, то в свойстве type всегда будет лежать value отмеченной радиокнопочки.

Давайте запустим:

let app = new Vue({
el: '#app',
data: {
type: '', // не забываем задать привязанное свойство в data
},
});
<div id="app">
<input name="radio" type="radio" v-model="type" value="один">
<input name="radio" type="radio" v-model="type" value="два">
<input name="radio" type="radio" v-model="type" value="три">
<p>Вы выбрали: {{ type }}</p>
</div>
Если после запуска вы понажимаете на радиокнопочки - вы увидите, как в абзаце под ними каждый раз выводится value отмеченной кнопки.

Селекты
Работа с селектами осуществляется аналогично - на тег селект вешается атрибут v-model, к нему привязывается свойство объекта data. В это свойство будет попадать текст выбранного тега <option>.

Попробуйте сами - запустите следующий код и поиграйтесь с ним:

let app = new Vue({
el: '#app',
data: {
selected: 'один', // значение по умолчанию
},
});
<div id="app">
<select v-model="selected">
<option>один</option>
<option>два</option>
<option>три</option>
</select>

<p>Вы выбрали: {{ selected }}</p>
</div>

Селекты и циклы
Не обязательно делать теги <option> вручную, ведь чаще всего данные, которые будут показаны в селекте хранятся в массиве.

Давайте сделаем такой массив и сформируем теги <option> с помощью цикла v-for:

let app = new Vue({
el: '#app',
data: {
selected: 'один', // значение по умолчанию
options: ['один', 'два', 'три'], // массив
},
});
<div id="app">
<select v-model="selected">
<option v-for="option in options">{{ option }}</option>
</select>
<p>Вы выбрали: {{ selected }}</p>
</div>