vuelidate смотрит на Ваши свойства в data(){} и делает computed свойства, подписываясь на них, когда Вы указываете их в соответствующем объекте validations.
Пример:
data() {
return {
name: '',
},
},
validations() {
return {
name: { required },
},
},
где то в шаблоне:
<input type="text" v-model="name" @input="$v.name.$touch()"/>
Или
<input type="text" v-model="$v.name.$model"/>
Во втором случае автоматически вызывается метод $touch, который определяет "трогал" ли пользователь поле, а значение, которое ввели в поле прописывается в data.name и в $v.name.$model.
Потрогал ли пользователь поле отображается в свойстве
$v.name.$dirty;
Так как мы передали валидатор required, то там же можно будет и посмотреть текущий статус этого валидатора:
$v.name.required;
Там ещё есть много других полезных свойств.
Можно опираться, например, на
$v.name.$invalid
или на
$v.name.$dirty && !$v.name.required // означает что поле потрогали и условие в required НЕ выполнилось. Когда поле будет заполнено - required вернёт true
Под "потрогали" предполагается что пользователь не просто установил фокус в поле и вышел из него, а что-то ввёл.
Так же можно посмотреть общий статус валидации текущего компонента в корне
$v.$invalid и тд
