Vue предоставляет 3 модификатора, которые позволяют нам изменить функциональность v-model.
.LAZY
По умолчанию v-model синхронизируется с состоянием экземпляра Vue (свойствами данных) при каждом событии ввода, что означает каждый раз, когда значение нашего ввода изменяется.
Все это происходит по событию input, т.е. когда мы начинаем, что-то вводить в поле. Модификатор .lazy позволяет изменить это поведение и синхронизировать ввод с данными по событию change.
В этом случае событие изменения запускается, когда изменения фиксируется. Для текстовых полей это происходит, когда наше поле теряет фокус. Данный модификатор может быть полезен, когда мы хотим на событие input для формы добавить один обработчик, а на событие change другой.
Кроме этого модификатор .lazy уменьшает количество синхронизаций v-model с экземпляром Vue, т.к. синхронизация будет происходить только после потери фокуса полем, а в некоторых случаях даже может повысить производительность за счет этого.
.NUMBER
Значение по умолчанию для ввода в поле input во Vue всегда является строкой String (строка). Модификатор .number позволяет нам автоматически преобразовать пользовательский ввод в число (Number).
В случае, если значение не может быть преобразовано в число, то возвращается исходное значение.
ЗАМЕТКА
*В документации Vue написано, что даже при указанном атрибуте type=»number» значением поля ввода всегда будет строка. У меня же значение поля сразу возвращает число, даже без использования модификатора Number, но это не относится к type=»tel», где ожидается ввод номера телефона – здесь возвращается строка.
.TRIM
По умолчанию Vue при вводе данных сохраняет все пробелы.
Модификатор .trim подобно методу JavaScript trim() удаляет пробельные символы с начала и конца строки для полей ввода, которые обрабатываются через v-model.
Кроме всего прочего Vue позволяет нам комбинировать использование сразу нескольких модификаторов:
До новых встреч!
Sphinx Academy