Здравствуйте! Есть форма. Валидируется через vee-validate и yup.
Проект учебный. Нужно на options API сделать setTimeout сброса submitCount. На Composition API я знаю, как сделать, но мне нужно сделать обязательно используя старый подход.
Подскажите, как это сделать, пожалуйста.
Вот код.
<template>
<Form
class="card"
@submit="onSubmit"
:validation-schema="schema"
v-slot="{ isSubmitting, submitCount}"
ref="myForm"
>
кол-во авторизаций {{ submitCount }}
<h1>Войти в систему</h1>
<Field
type="email"
name="email"
v-slot="{ field, errors, errorMessage }"
>
<div class="form-control" :class="{ invalid: errors.length}">
<label for="email">Пароль</label>
<input v-bind="field" id="email" type="text" autocomplete="on"/>
<small v-if="errorMessage">{{ errorMessage }}</small>
</div>
</Field>
<Field type="password" name="password" #="{ field, errors, errorMessage}">
<div class="form-control" :class="{ invalid: errors.length}">
<label for="password">Пароль</label>
<input v-bind="field" id="password" type="password" autocomplete="off"/>
<small v-if="errors">{{ errorMessage }}</small>
</div>
</Field>
<button
class="btn primary"
type="submit"
:disabled="isSubmitting || submitCount > 3"
>Войти
</button>
<div v-if="submitCount > 3">Слишком много попыток входа. Попробуйте через 1 минуту</div>
</Form>
</template>
<script>
import * as yup from 'yup';
import {Form, Field, ErrorMessage } from 'vee-validate'
export default {
name: "Auth",
components: {
Form, Field, ErrorMessage
},
data() {
return {
email: '',
password: '',
schema: yup.object({
email:
yup
.string()
.trim()
.required('E-mail обязателен')
.email('Введите корректный e-mail'),
password:
yup
.string()
.trim()
.required('Пароль обязателен')
.min(8, 'Пароль не менее 8 символов')
})
}
},
methods: {
onSubmit(values) {
console.log(values); // send data to API
// reset the form and the field values to their initial values
this.$refs.myForm.resetForm();
},
},
}
</script>
<style scoped>
</style>