Для чого використовується v-model?

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

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"

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

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

Premium

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