@jeremy_larkin
Для валидации input с типом number во Vue.js можно использовать директиву v-model и свойство v-bind:class для добавления класса при ошибке ввода.
Вот пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<template> <div> <label for="age">Введите возраст:</label> <input type="number" id="age" v-model="age" :class="{ error: !isValid }" /> <p v-if="!isValid" class="error-message">Некорректный возраст</p> </div> </template> <script> export default { data() { return { age: null, }; }, computed: { isValid() { return Number.isInteger(Number(this.age)) && this.age >= 0; }, }, }; </script> <style> .error { border-color: red; } .error-message { color: red; margin-top: 5px; } </style> |
В данном примере мы создаем input с типом number и привязываем его значение к свойству age с помощью директивы v-model. Для добавления класса при ошибке ввода мы используем свойство v-bind:class и передаем объект, который содержит название класса и условие его применения: { error: !isValid }
.
В computed свойстве isValid мы проверяем корректность значения age. Если значение не является целым числом или меньше нуля, то возвращается false, что приведет к применению класса error к input и отображению сообщения об ошибке.
Мы также добавили стили для класса error и сообщения об ошибке.