Директива v-model во Vue используется для создания двусторонней привязки между данными в модели компонента (data) и пользовательским интерфейсом (DOM). Это означает, что изменения, происходящие в UI (например, пользователь что-то вводит в поле), автоматически отражаются в данных, и наоборот — любые изменения в данных моментально обновляют отображение в DOM.

Основная цель v-model

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

Как работает v-model

Под капотом v-model — это сочетание:

• :value (или другого атрибута, зависящего от типа элемента),

• и события (@input, @change, @update:modelValue и т.д.).

Пример:

<input v-model="name">

Эквивалентно:

<input :value="name" @input="name = $event.target.value">

Это означает:

• Значение из data.name вставляется в поле input.

• Когда пользователь вводит данные, срабатывает событие input, и значение в data.name обновляется.

Применение v-model на разных элементах

1. Текстовое поле

<input v-model="username">
data() {
return {
username: ''
}
}

Изменения в username отображаются в input, и пользовательский ввод обновляет username.

2. Многострочный текст (textarea)

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

Поддерживает те же правила: синхронизация между содержимым и данными.

3. Чекбокс (checkbox)

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

• При установке чекбокса значение isActive становится true.

• При снятии — false.

Если v-model применяется к чекбоксу с массивом:

<input type="checkbox" v-model="selectedFruits" value="apple">
<input type="checkbox" v-model="selectedFruits" value="banana">
data() {
return {
selectedFruits: \[\]
}
}

Выбранные значения будут автоматически добавляться/удаляться из массива.

4. Радиокнопки (radio)

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

picked примет значение One или Two в зависимости от выбора пользователя.

5. Выпадающий список (select)

<select v-model="selected">
<option disabled value="">Выберите</option>
<option>Vue</option>
<option>React</option>
</select>
data() {
return {
selected: ''
}
}

6. Select с множественным выбором

<select v-model="selectedItems" multiple>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</select>
data() {
return {
selectedItems: \[\]
}
}

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

Vue предоставляет специальные модификаторы для управления тем, как v-model обрабатывает ввод:

.lazy

Изменения происходят при change, а не input:

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

.number

Преобразует ввод в число:

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

"42" → 42.

.trim

Удаляет пробелы в начале и конце строки:

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

Использование в компонентах

В Vue 2, чтобы использовать v-model с компонентом, компонент должен:

• Принимать проп value,

• Эмитить событие input.

Пример:

<MyInput v-model="email" />

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

<input :value="value" @input="$emit('input', $event.target.value)">

В Vue 3 — используется modelValue и событие update:modelValue:

<MyInput v-model="email" />

В компоненте:

props: \['modelValue'\],
emits: \['update:modelValue'\]
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">

Также Vue 3 поддерживает несколько моделей:

<MyComponent
v-model:title="pageTitle"
v-model:content="pageContent"
/>

Компонент должен:

• Принимать title, content как props,

• Эмитить update:title, update:content.

Польза использования v-model

• Упрощает работу с формами, снижает объём шаблонного кода.

• Автоматически поддерживает актуальность данных.

• Сокращает количество ручных обработчиков.

• Обеспечивает реактивность — любые изменения немедленно отражаются в UI.

• Повышает читаемость и поддержку кода.

• Подходит как для стандартных HTML-элементов, так и для пользовательских компонентов.

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