Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Для чого використовується v-model?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`v-model`** - директива Vue для двосторонньої прив'язки даних між елементом шаблону (input, select, textarea, компонент) і змінною стану. **Ключове:** оновлення значення в DOM змінює дані, а оновлення даних змінює DOM - Vue робить це автоматично через комбінацію v-bind і v-on.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`v-model` - це директива Vue для **двосторонньої прив'язки даних**. Вона пов'язує значення в шаблоні (input, select, textarea, компонент) зі змінною в стані, так що **оновлення значення в DOM змінює дані**, а **оновлення даних змінює DOM**. Простими словами: > `v-model` **автоматично синхронізує дані та інтерфейс.** --- ## Як працює `v-model` (на прикладі input) ```html <input v-model="name"> ``` Це **синтаксичний цукор** для: ```html <input :value="name" @input="name = $event.target.value" /> ``` Тобто Vue сам робить `v-bind` + `v-on`. --- ## Підтримка різних елементів форм ### Текстові інпути ```html <input v-model="text"> ``` ### Чекбокс ```html <input type="checkbox" v-model="checked"> ``` ### Радіокнопки ```html <input type="radio" value="A" v-model="choice"> <input type="radio" value="B" v-model="choice"> ``` ### Select ```html <select v-model="selected"> <option value="1">One</option> </select> ``` ### Чекбокси з масивами ```html <input type="checkbox" value="A" v-model="selectedItems"> ``` Якщо чекбокс увімкнено -> `value` додається в масив. Якщо вимкнено -> значення видаляється. --- ## Модифікатори v-model #### `.trim` Автоматично видаляє пробіли по краях ```html <input v-model.trim="name"> ``` #### `.number` Перетворює значення в число ```html <input v-model.number="age"> ``` #### `.lazy` Спрацьовує при `change`, а не при `input` ```html <input v-model.lazy="value"> ``` --- ## v-model у компонентах (дуже важлива тема) У Vue 3: ```html <MyInput v-model="username" /> ``` Vue інтерпретує це як: - передати проп `modelValue` - слухати подію `update:modelValue` Приклад компонента: ```vue <script> export default { props: { modelValue: String }, emits: ['update:modelValue'] } </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > </template> ``` --- ## Іменовані моделі (Vue 3) Можна мати кілька `v-model` в одному компоненті: ```html <DatePicker v-model:start="startDate" v-model:end="endDate" /> ``` Компонент має працювати з `modelValue`, заміненим на аргумент: - проп: `start` - подія: `update:start` --- ## Як працює v-model "під капотом" Кожен `v-model` перетворюється на комбінацію: - `v-bind` для передачі значення - `v-on` для оновлення даних Тобто фактично це: ``` :prop="value" @event="value = $event" ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.