V-model у Vue.js

Що таке v-model?

v-model — це директива Vue, яка створює двостороннє зв'язування даних між елементами форми та даними компонент.

javascript

<template>
  <input v-model="message" />
  <p>Повідомлення: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Привіт')
</script>

Коли користувач вводить текст, message автоматично оновлюється, і навпаки.

Як працює v-model

v-model є синтаксичним цукром для зв'язування значення та обробки подій:

javascript

<!-- З v-model -->
<input v-model="text" />

<!-- Еквівалентно -->
<input 
  :value="text"
  @input="text = $event.target.value"
/>

Vue автоматично:

Прив'язує значення до даних (:value)
Слухає подію зміни (@input)
Оновлює дані при зміні

v-model з різними елементами

Input (текст)

javascript

<template>
  <input v-model="text" type="text" />
</template>

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

Textarea

javascript

<template>
  <textarea v-model="message"></textarea>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Багаторядковий текст')
</script>

Checkbox (одинарний)

javascript

<template>
  <input type="checkbox" v-model="checked" />
  <span>Погоджено: {{ checked }}</span>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(false)
</script>

Checkbox (множинний)

javascript

<template>
  <input type="checkbox" value="Vue" v-model="frameworks" />
  <input type="checkbox" value="React" v-model="frameworks" />
  <input type="checkbox" value="Angular" v-model="frameworks" />
  <p>Вибрано: {{ frameworks }}</p>
</template>

<script setup>
import { ref } from 'vue'
const frameworks = ref([])
</script>

Radio

javascript

<template>
  <input type="radio" value="male" v-model="gender" />
  <input type="radio" value="female" v-model="gender" />
  <p>Стать: {{ gender }}</p>
</template>

<script setup>
import { ref } from 'vue'
const gender = ref('male')
</script>

Select

javascript

<template>
  <select v-model="selected">
    <option disabled value="">Виберіть</option>
    <option value="A">Опція A</option>
    <option value="B">Опція B</option>
    <option value="C">Опція C</option>
  </select>
  <p>Вибрано: {{ selected }}</p>
</template>

<script setup>
import { ref } from 'vue'
const selected = ref('')
</script>

Модифікатори v-model

.lazy

За замовчуванням, v-model оновлюється на події input. Модифікатор .lazy переключає на change:

javascript

<template>
  <!-- Оновлюється тільки після blur -->
  <input v-model.lazy="message" />
</template>

.number

Автоматично перетворює значення на число:

javascript

<template>
  <input v-model.number="age" type="number" />
</template>

<script setup>
import { ref } from 'vue'
const age = ref(0)
// age завжди число, а не рядок
</script>

.trim

Автоматично обрізає пробіли:

javascript

<template>
  <input v-model.trim="username" />
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')
</script>

Комбінування модифікаторів

javascript

<template>
  <input v-model.lazy.trim="message" />
  <input v-model.number.lazy="age" type="number" />
</template>

v-model у кастомних компонентх

Composition API

У Composition API, v-model працює з пропом modelValue та подією update:modelValue:

javascript

<!-- ParentComponent.vue -->
<template>
  <CustomInput v-model="searchText" />
</template>

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const searchText = ref('')
</script>

javascript

<!-- CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

Використання обчислених для спрощення

javascript

<!-- CustomInput.vue -->
<template>
  <input v-model="value" />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

Кілька v-model (Vue 3)

У Vue 3 ви можете використовувати кілька v-model в одному компоненті:

javascript

<!-- UserForm.vue -->
<template>
  <UserName
    v-model:first-name="firstName"
    v-model:last-name="lastName"
  />
</template>

<script setup>
import { ref } from 'vue'

const firstName = ref('')
const lastName = ref('')
</script>

javascript

<!-- UserName.vue -->
<template>
  <input
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
    placeholder="Ім'я"
  />
  <input
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
    placeholder="Прізвище"
  />
</template>

<script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script>

Кастомні модифікатори

Ви можете створювати кастомні модифікатори:

javascript

<!-- Parent.vue -->
<template>
  <MyComponent v-model.capitalize="myText" />
</template>

javascript

<!-- MyComponent.vue -->
<template>
  <input
    :value="modelValue"
    @input="handleInput"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

function handleInput(event) {
  let value = event.target.value
  
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  
  emit('update:modelValue', value)
}
</script>

Загальні помилки

Пряме модифікування пропсів

javascript

<!-- Неправильно -->
<template>
  <input v-model="modelValue" />
</template>

<script setup>
defineProps(['modelValue'])
// Vue попередить про модифікацію пропсів
</script>

<!-- Правильно -->
<template>
  <input v-model="value" />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

Висновок

v-model:

Створює двостороннє зв'язування даних
Синтаксичний цукор для :value та @input
Працює з різними елементами форми
Має модифікатори: .lazy, .number, .trim
У Vue 3 підтримує множинне використання
Може використовуватися в кастомних компонентх

На співбесідах:

Важливо вміти:

Пояснити, що таке v-model і як він працює
Показати, як v-model розширюється до :value + @input
Описати модифікатори
Пояснити, як використовувати v-model у кастомних компонентх
Навести приклади з різними елементами форми

Що таке v-model? Як працює v-model v-model з різними елементами Input (текст) Textarea Checkbox (одинарний) Checkbox (множинний) Radio Select Модифікатори v-model .lazy .number .trim Комбінування модифікаторів v-model у кастомних компонентх Composition API Використання обчислених для спрощення Кілька v-model (Vue 3) Кастомні модифікатори Загальні помилки Пряме модифікування пропсів Висновок

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

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

Premium

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

Дочитали статтю?

Практика завдань