Як працює директива v-model?

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

Директива 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

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

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

Premium

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