Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює двостороннє зв'язування (v-model)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`v-model` - це **директива**, яка зв'язує значення змінної компонента з елементом форми (input, textarea, select тощо) **в обидва боки**: коли дані змінюються, оновлюється інтерфейс, а коли користувач вводить у форму, оновлюється змінна. **Ключове:** Vue створює цю синхронізацію в обидва боки без потреби писати обробники вручну.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## 1. Що таке `v-model` `v-model` - це **директива**, яка зв'язує значення змінної компонента з елементом форми (**input, textarea, select тощо**) **в обидва боки**: - коли дані змінюються → оновлюється інтерфейс - коли користувач вводить у форму → оновлюється змінна Тобто `v-model` = **"дані ↔ інтерфейс"**. --- ## 2. Приклад базового використання ```javascript <template> <input v-model="message" placeholder="Введіть текст" /> <p>Ви ввели: {{ message }}</p> </template> <script setup> import { ref } from 'vue' const message = ref('') </script> ``` ### Що відбувається: - Коли користувач вводить текст → `message.value` оновлюється. - Коли `message.value` змінюється → `input` автоматично показує нове значення. Vue створює **синхронізацію в обидва боки** без потреби писати обробники вручну. --- ## 3. Як `v-model` працює "під капотом" Ось цей код: ```javascript <input v-model="message" /> ``` Vue **транслює** це у звичайні атрибути та події: ```javascript <input :value="message" @input="message = $event.target.value" /> ``` Тобто: - `:value` - **односторонній зв'язок даних** (з компонента → у DOM); - `@input` - **зворотний зв'язок** (з DOM → у компонент). Ось так і виходить **двостороннє зв'язування даних**. --- ## 4. Робота з різними типами елементів | Елемент | Що зв'язує | Приклад | |---|---|---| | `<input type="text">` | `value` ↔ текст | `<input v-model="text" />` | | `<input type="checkbox">` | `checked` ↔ boolean | `<input type="checkbox" v-model="isChecked" />` | | `<input type="radio">` | `checked` ↔ значення | `<input type="radio" value="A" v-model="choice" />` | | `<select>` | `value` ↔ вибране значення | `<select v-model="option">` | | `<textarea>` | `value` ↔ текст | `<textarea v-model="comment"></textarea>` | --- ## 5. Двостороннє зв'язування між **компонентами** `v-model` можна використовувати не лише з елементами форми, а й **для зв'язку батько ↔ дочірній компонент**. ### Батько: ```javascript <UserInput v-model="username" /> ``` ### Дочірній компонент: ```javascript <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) </script> ``` Батько передає значення через `v-model` → проп `modelValue` Дочірній компонент повідомляє про зміни через подію `update:modelValue` > Це стандартний контракт `v-model` у Vue 3: > **prop:** `modelValue` → **emit:** `update:modelValue` --- ## 6. Декілька `v-model` в одному компоненті Vue 3 дозволяє використовувати **декілька незалежних v-model** з іменами: ```javascript <MyInput v-model:title="pageTitle" v-model:content="pageText" /> ``` Дочірній компонент: ```javascript <script setup> defineProps(['title', 'content']) defineEmits(['update:title', 'update:content']) </script> ``` --- ## 7. Модифікатори `v-model` Vue пропонує зручні **модифікатори**, які трансформують дані під час вводу: | Модифікатор | Опис | Приклад | |---|---|---| | `.lazy` | Оновлює значення лише після `change`, а не `input` | `<input v-model.lazy="text" />` | | `.trim` | Автоматично прибирає пробіли на початку та в кінці | `<input v-model.trim="name" />` | | `.number` | Перетворює значення в число | `<input v-model.number="age" />` | --- ## 8. Під капотом реактивності Коли ви пишете `v-model="x"`: 1. Vue відстежує, що DOM-елемент **залежить від** `x`; 2. при зміні `x` оновлюється атрибут `value`; 3. при події `input/change` Vue викликає **зворотне оновлення** → `x = $event.target.value`. Ці два напрямки утворюють **реактивну петлю**, забезпечуючи миттєве оновлення UI та стану. --- ## Підсумок > `v-model` - це механізм двостороннього зв'язування даних у Vue.js. > > Він автоматично синхронізує стан компонента та інтерфейсу: > > - **з коду → в DOM** (`:value="..."`) > - **з DOM → в код** (`@input="..."`) > > Працює як з елементами форми, так і з компонентами, > підтримує **модифікатори** та **множинні моделі**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.