Як працює двостороннє зв'язування (v-model)?

VueJunior~2 хв читання

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":

Vue відстежує, що DOM-елемент залежить від x;
при зміні x оновлюється атрибут value;
при події input/change Vue викликає зворотне оновлення → x = $event.target.value.

Ці два напрямки утворюють реактивну петлю, забезпечуючи миттєве оновлення UI та стану.

Підсумок

v-model - це механізм двостороннього зв'язування даних у Vue.js.

Він автоматично синхронізує стан компонента та інтерфейсу:

з коду → в DOM (:value="...")

з DOM → в код (@input="...")

Працює як з елементами форми, так і з компонентами, підтримує модифікатори та множинні моделі.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.