Обработка различных типов input

Vue.js предоставляет мощные инструменты для работы с элементами формы и их состоянием, позволяя создавать динамические интерфейсы с минимальным количеством кода. Основной механизм для синхронизации данных с элементами формы — директива v-model. Она обеспечивает двустороннюю привязку данных, автоматически обновляя значение переменной при изменении input и наоборот.

Текстовые поля (text, password, email, search)

Для базовых текстовых полей используется стандартный синтаксис:

<input v-model="username" type="text" placeholder="Введите имя">
data() {
  return {
    username: ''
  }
}

v-model автоматически отслеживает изменения значения и обновляет соответствующую переменную. Для полей с типом password или email синтаксис идентичен, важно лишь корректно настроить тип input, чтобы браузер применял соответствующую валидацию.

Числовые значения (number)

Для числовых полей применяется модификатор .number, который автоматически преобразует ввод в число:

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

Без модификатора .number значение будет сохраняться как строка, что может вызвать ошибки при математических операциях.

Флажки (checkbox)

Checkbox может быть привязан к булевому значению или массиву:

<input type="checkbox" v-model="isSubscribed">
data() {
  return {
    isSubscribed: false
  }
}

Если один checkbox связан с массивом, то Vue автоматически добавляет или удаляет значение из массива при изменении состояния:

<input type="checkbox" v-model="selectedOptions" value="option1">
<input type="checkbox" v-model="selectedOptions" value="option2">
data() {
  return {
    selectedOptions: []
  }
}

Переключатели (radio)

Radio buttons работают аналогично checkbox, но привязаны к одному значению:

<input type="radio" v-model="picked" value="A"> A
<input type="radio" v-model="picked" value="B"> B
data() {
  return {
    picked: ''
  }
}

Выбор одного radio автоматически обновляет переменную picked на значение выбранного элемента.

Выпадающие списки (select)

Для select можно использовать одиночный выбор или множественный. Для одиночного:

<select v-model="selected">
  <option disabled value="">Выберите</option>
  <option>A</option>
  <option>B</option>
</select>

Для множественного:

<select v-model="selectedOptions" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

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

Текстовые области (textarea)

Textarea работает как обычный input с v-model:

<textarea v-model="description" rows="5"></textarea>

Изменения текста в textarea синхронизируются с переменной description.

Обработка событий ввода

Помимо v-model, можно использовать события @input, @change, @blur, @focus для более тонкого контроля:

<input type="text" @input="onInput">
methods: {
  onInput(event) {
    console.log(event.target.value);
  }
}

Это позволяет выполнять дополнительные проверки или преобразования данных перед их сохранением в состоянии компонента.

Динамические и составные input

Для динамических форм, где тип или набор input меняется в зависимости от состояния, Vue позволяет привязывать v-model к объектам и использовать вычисляемые свойства:

<input v-model="formData[currentField]" :type="fieldType">
data() {
  return {
    formData: {},
    currentField: 'email',
    fieldType: 'email'
  }
}

Таким образом, один компонент может управлять множеством разных типов полей, сохраняя код компактным и гибким.

Валидация и модификаторы

Vue предоставляет встроенные модификаторы lazy (обновление значения только при потере фокуса), trim (удаление пробелов по краям) и number (преобразование в число):

<input v-model.lazy.trim.number="quantity" type="number">

Это позволяет минимизировать ручное написание логики валидации и нормализации данных.

Итоговая структура

Использование v-model совместно с модификаторами и событиями обеспечивает полный контроль над формами любого уровня сложности. Комбинируя массивы для множественного выбора, объекты для динамических форм и вычисляемые свойства для сложной логики, можно создавать масштабируемые и легко поддерживаемые интерфейсы.

Важной практикой является единообразное использование привязок и модификаторов, что предотвращает неожиданные преобразования данных и облегчает поддержку кода.

Оглавление