Що робить модифікатор .trim?
Модифікатор .trim у директиві v-model автоматично видаляє пробіли по краях рядка перед тим, як записати значення в модель.
Простіше кажучи:
.trimприводить ввід користувача до "чистого" значення без початкових і кінцевих пробілів.
Як працює .trim?
html
<input v-model.trim="username">Якщо користувач вводить:
" Alex "
То у змінну username потрапить:
"Alex"
Vue робить це автоматично, без додаткового коду.
Приклад
html
<input v-model.trim="inputText">
<p>{{ inputText }}</p>Користувач вводить:
" hello "
Результат після вводу:
hello
Коли корисно використовувати .trim?
1. При вводі логінів, імен, email
Щоб прибрати випадкові пробіли:
" user@mail.com "
2. При валідації форм
Щоб запобігти ситуаціям, коли користувач вводить:
" " -> порожній рядок -> помилка
Без .trim такий рядок може вважатися непорожнім.
3. Для текстів без значущих відступів
Наприклад:
- заголовки
- коментарі
- пошукові запити
4. Щоб уникнути багів при порівнянні рядків
Наприклад:
js
if (username === "admin")Без .trim порівняння може бути неправильним через пробіли.
Як це працює під капотом?
Vue автоматично обробляє:
html
v-model.trim="value"як:
- отримати
event.target.value - викликати
.trim()на рядку - записати результат у модель
Тобто:
js
value = event.target.value.trim();Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.