Модификаторы v-model

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

.lazy — обновление по событию change

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

<input v-model.lazy="username" type="text">

В этом примере значение username обновится только после потери фокуса или нажатия Enter, а не при каждом вводе символа.

.number — автоматическое преобразование в число

Когда значение поля ввода необходимо хранить как число, модификатор .number автоматически приводит строку к числовому типу. Это избавляет от необходимости вручную использовать parseInt или parseFloat.

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

Если пользователь введет "25", Vue преобразует это значение в 25 (тип Number). Если введено некорректное число, значение останется строкой, что важно учитывать при валидации.

.trim — удаление пробелов

Модификатор .trim автоматически убирает пробелы в начале и в конце строки, что особенно полезно для форм, где лишние пробелы могут приводить к ошибкам.

<input v-model.trim="email" type="text">

При вводе " example@mail.com " значение email будет сохранено как "example@mail.com", без пробелов.

Совмещение модификаторов

Модификаторы можно комбинировать для достижения требуемого поведения. Порядок применения не влияет на результат:

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

Здесь происходит следующее:

  1. Значение обновляется только после события change (.lazy).
  2. Убираются пробелы в начале и в конце (.trim).
  3. Строка преобразуется в число (.number).

Такое сочетание удобно для финансовых или числовых полей с пользовательским вводом.

Модификаторы с кастомными компонентами

При использовании v-model с компонентами Vue можно настраивать modelValue и события для поддержки модификаторов. Например, компонент CustomInput может принимать модификаторы .number или .trim через обработку update:modelValue:

<CustomInput v-model.number="score" />

Внутри компонента:

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])

function onInput(event) {
  let value = event.target.value
  value = Number(value) // обработка модификатора .number
  emit('update:modelValue', value)
}
</script>

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

Практические рекомендации

  • Использовать .lazy для полей, где обновление на каждый ввод нежелательно (например, большие текстовые блоки).
  • Применять .number для числовых данных, чтобы избежать ошибок при математических операциях.
  • .trim помогает предотвращать ошибки при работе с e-mail, логинами, паролями и другими текстовыми данными.
  • Комбинирование модификаторов упрощает код и уменьшает необходимость в дополнительной обработке данных.
  • Для кастомных компонентов следует явно поддерживать модификаторы через обработку update:modelValue и кастомные события.

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

Оглавление