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