Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює директива v-model?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`v-model`** - це механізм двосторонньої прив'язки даних, який зв'язує значення елемента форми зі змінною у стані Vue через комбінацію `:value` та обробника події (наприклад, `@input`). **Ключове:** зміна вводу оновлює дані, а зміна даних у коді оновлює UI - саме поєднання цих двох напрямків і дає двосторонній зв'язок.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняДиректива `v-model` - це механізм **двосторонньої прив'язки даних**, який зв'язує значення елемента вводу (input, textarea, select, компонент) зі змінною у стані Vue. Простіше кажучи: > `v-model` **зв'язує дані та UI так, що зміна одного автоматично оновлює інше.** --- ## Як працює `v-model` під капотом? Коли ти пишеш: ```html <input v-model="message"> ``` Vue перетворює це на дві дії: #### 1. Прив'язка значення (model → view) ```html :value="message" ``` UI завжди показує актуальні дані. #### 2. Обробник події (view → model) ```html @input="message = $event.target.value" ``` Коли користувач вводить текст → змінна `message` оновлюється. **Саме об'єднання цих двох напрямків дає двосторонню прив'язку.** --- ## Приклад ```vue <template> <input v-model="name" /> <p>{{ name }}</p> </template> <script> export default { data() { return { name: '' } } } </script> ``` Користувач вводить текст → `name` змінюється. `name` змінюється в коді → input оновлюється. --- ## Як `v-model` працює в різних елементах форми? #### text input ```html <input v-model="text"> ``` #### checkbox ```html <input type="checkbox" v-model="checked"> ``` #### radio ```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> ``` #### checkbox з масивами ```html <input type="checkbox" value="A" v-model="items"> ``` Якщо вибрано → додасться в масив. Якщо знято → видалиться. --- ## Модифікатори `v-model` (Vue 3) | Модифікатор | Що робить | |---|---| | `.lazy` | оновлює модель при `change`, а не `input` | | `.trim` | видаляє пробіли по краях | | `.number` | приводить значення до числа | Приклад: ```html <input v-model.trim.number="age"> ``` --- ## Як `v-model` працює в компонентах (Vue 3) Коли ти пишеш: ```html <MyInput v-model="value" /> ``` Vue замінює це на: - передати проп `modelValue` - слухати подію `update:modelValue` Компонент має виглядати так: ```vue <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> ``` Це і є внутрішній механізм `v-model`. --- ## Іменовані моделі (Vue 3) Можна мати кілька v-model: ```html <DateRange v-model:start="startDate" v-model:end="endDate" /> ``` Компонент має підтримувати: - проп: `start` - подію: `update:start` - проп: `end` - подію: `update:end`Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.