Що таке модифікатори v-model?
Модифікатори v-model - це спеціальні суфікси (.trim, .number, .lazy), які змінюють стандартну поведінку двостороннього зв'язування.
Простіше кажучи:
Модифікатори уточнюють, як саме Vue має оновлювати значення моделі.
Використовуються так:
<input v-model.trim="name">Які модифікатори існують?
У Vue 3 доступні три вбудовані модифікатори:
1) .trim - прибирає пробіли по краях
<input v-model.trim="username">Введення:
" Alex " → "Alex"
Використовується, коли потрібно запобігти зайвим пробілам, наприклад, при логіні.
2) .number - приводить значення до числа
<input v-model.number="age" />Якщо користувач вводить "42" → у змінну потрапить 42 (тип Number).
Це зручно для:
- віку
- цін
- кількостей
- будь-яких числових полів
3) .lazy - оновлює модель при change, а не при input
Зазвичай v-model оновлює дані щоразу, коли користувач вводить символ.
.lazy перемикає оновлення на подію change:
<input v-model.lazy="title">Тобто дані оновляться тільки при втраті фокуса або на Enter.
Модифікатори можна комбінувати
<input v-model.trim.number="price">Модифікатори в кастомних компонентах
Компонент може отримати об'єкт модифікаторів через:
binding.modifiersАле для v-model у компонентах (Vue 3) використовується трохи інша система.
Vue автоматично передає модифікатори як props:
<MyInput v-model.trim="value" />У дочірньому компоненті ти можеш отримати їх так:
props: {
modelModifiers: {
type: Object,
default: () => ({})
}
}Потім застосувати:
if (props.modelModifiers.trim) {
emittedValue = emittedValue.trim();
}Як це працює «під капотом»
Модифікатор напряму змінює поведінку:
| Модифікатор | Що робить |
|---|---|
.trim | обрізає пробіли перед оновленням даних |
.number | приводить value до Number |
.lazy | прив'язує оновлення до change замість input |
Vue автоматично додає відповідну логіку в обробники подій.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.