Checkbox, radio кнопки и select в формах Vue

В прошлой статье "Формы в Vue" мы разобрали только самые простые элементы форм. Но вреймворк Vue умеет взаимодействовать с такими элементами форм как чекбоксы, радио кнопки и выпадающие списки. Для демонстрации этих функций потребуется всё та же директива v-model.

Чекбоксы

Простейшая демонстрация работы с чекбоксом - это вывод его состояния. Всё что нам нужно - это поставить директиву "v-model" для элемента и создать соответствующую её значению переменную в настройке "data".

<div id="application">
   <input type="checkbox" v-model="checked">
   <p>Чекбокс в состоянии: {{ checked }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         checked: false
      },
   });
</script>

Свойство "checked" может иметь два значения: true (галочка стоит) и false (галочки нет).

Попробуйте запустить код и понаблюдать за строкой "Чекбокс в состоянии", кликая на чекбокс. Там будет отображаться:

• Чекбокс в состоянии: true
• Чекбокс в состоянии: false

Этот вид не совсем удобный. Попробуем использовать оператор, который обсуждали в статье "Тернарный оператор в Vue", чтобы улучшить вывод. Получится так:

<div id="application">
   <input type="checkbox" v-model="checked">
   <p>Чекбокс в состоянии: {{ checked ? 'галка есть' : 'галки нет' }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         checked: false
      },
   });
</script>

Запустите такой код и попробуйте кликнуть несколько раз на чекбокс. Варианты текста рядом с ним будут следующие:

• Чекбокс в состоянии: галка есть
• Чекбокс в состоянии: галки нет

Чекбоксы имеют возможность мультивыбора, в отличии от радиокнопок. То есть несколько чекбоксов могут быть отмечены галками одновременно. Такое поведение может обрабатываться фреймворком Vue. Продемонстрируем это, добавив тексколько чекбоксов с различными значениями value:

<div id="application">
   <input type="checkbox" v-model="animals" value="Мышь">
   <input type="checkbox" v-model="animals" value="Кот">
   <input type="checkbox" v-model="animals" value="Котята">
   <p>Животные: {{ animals }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         animals: [ ] // массив 
      },
   });
</script>

Как можно заметить, мы использовали несколько элементов с одинаковой директивой v-model="animals". Поэтому в настройке data мы поставили значение для animals равной пустому массиву. Теперь попробуйте загрузить код этого примера и кликнуть на несколько чекбоксов.

Радиокнопочки

Взаимодействие с радио кнопками почти ничем не отличается от чекбоксов. Поэтому можем переписать предыдущий пример заменим "checkbox" на "radio" и добавив атрибут "name", чтобы обозначить группу кнопкок, между которым может происходить переключение:

<div id="application">
   <input name="animal" type="radio" v-model="animals" value="Мышь">
   <input name="animal" type="radio" v-model="animals" value="Кот">
   <input name="animal" type="radio" v-model="animals" value="Котята">
   <p>Животные: {{ animals }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         animals: '' // строка 
      },
   });
</script>

При клике на радио кнопке в свойство "animals" будет попадать значение, указанное в атрибуте "value". То есть строка.

Селекты

Для взаимодействия тега выпадающего списка "select" и фреймворка Vue используется всё та же директива "v-model". Аналогично радиокнопке, в свойство, привязанное к выпадающему списку, будет попадать строковое значение. Но в случае "select" это будут значения, которые стоят внутри выбранных тегов "options":

<div id="application">
   <select v-model="animal">
      <option>Мышь</option>
      <option>Кот</option>
      <option>Котята</option>
   </select>
   <p>Выбран пункт: {{ animal }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         animal: '' // строка 
      },
   });
</script>

В реальных проектах пункты выпадающего списка часто генерируются из массивов. Попробуем сделать пример такого кода, используя уже изученную в статье "Циклы в Vue" директиву v-for:

<div id="application">
   <select v-model="selectedAnimal">
      <option v-for="animal in animals">{{ animal }}</option>
   </select>
   <p>Выбран пункт: {{ selectedAnimal }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         selectedAnimal: ''
         animals: ['Мышь', 'Кот', 'Котята'] 
      },
   });
</script>

В этом примере мы программно создаём пункты выпадающего списка, используя элементы массива в свойстве "animals". А при выборе пункта из списка в свойство "selectedAnimal" записывается текст выбранного пункта.