Фреймворк Vue для работы с формами предоставляет также вспомогательный инструмент - модификаторы полей ввода, который позволяют управлять некоторыми моментами при вводе в элементы форм.
По умолчанию директива v-model обновляет связанные с полем ввода данные при каждом вызове события input. То есть при вводе каждого символа в текстовое поле будут изменяться связанные данные. Но вместо этого мы также можем вызывать обновление не после события input, а после события change. То есть связанные данные будут обновляться только после того, как текстовое поле потеряет фокус. Для этого применяется модификатор .lazy:
<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<input v-model.lazy="name" class="form-control" />
<span>Введено: {{name}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
data() {
return {
name:''
}
}
}).mount('#app');
</script>
</body>
</html>
Модификатор .number позволяет автоматически конвертировать при вводе вводимое значение в число. Поскольку даже если мы установим
у поля input атрибут type="number", то такое поле все равно будет возвращать строку:
<div id="app">
<input v-model.number="age" type="number">
<span>Введено: {{age}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
data() {
return {
age: 0
}
}
}).mount('#app');
</script>
Модификатор .trim автоматически обрезает начальные и концевые пробелы при вводе строки:
<div id="app">
<input v-model.trim="message">
<span>Введено: {{message}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
data() {
return {
message: ''
}
}
}).mount('#app');
</script>
Также можно объединять модификаторы:
<input v-model.lazy.trim="message"> <input v-model.lazy.number="age" type="number">