Здраствуйте, я делаю форму валидации на Vue.js 3. у меня выпадает предупреждения. Я уже не знаю. Даже самому интересно узнать их причиную
<template>
<div class="container">
<form @submit.prevent="checkForm">
<div class="form-group">
<label for="login">Логин</label>
<input
class="form-control"
:class="$v.form.login.$error ? 'is-invalid' : ''"
id="login"
v-model.trim="form.login" />
<p v-if="$v.form.login.$dirty && !$v.form.login.required" class="invalid-feedback">
Обязательное поле
</p>
<p v-if="$v.form.login.$dirty && !$v.form.login.minLength" class="invalid-feedback">
Здесь должно быть больше 5-и символов
</p>
</div>
<div class="mb-3">
<label for="email">Электронная почта</label>
<input
type="email"
class="form-control"
id="email"
v-model.trim="form.email" />
</div>
<div class="mb-3">
<label for="password">Пароль</label>
<input
type="password"
class="form-control"
id="password"
v-model.trim="form.password" />
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Запомнить меня</label>
</div>
<button type="submit" class="btn btn-primary">Войти</button>
</form>
</div>
</template>
<script>
import useVuelidate from '@vuelidate/core';
import { required, email, minLength } from '@vuelidate/validators';
export default {
setup() {
return { $v: useVuelidate() }
},
data() {
return {
form: {
login: '',
email: '',
password: '',
},
}
},
validations() {
return {
form: {
login: { required, minLength: minLength(5)},
email: { required, email },
password: { required },
},
methods: {
checkForm() {
this.$v.form.$touch()
if (this.$v.form.$error) {
console.log('Валидация прошла успешно!')
}
}
},
}
},
}
</script>
Ответы (1 шт):
Автор решения: Кирилл Панишев
→ Ссылка
Почему $v: useVuelidate() если в доке написано v$: useVuelidate()?
Почему methods внутри validations()?
