Задать вопрос
@slagoris

Как получить для обработки в методе значение из слота формы?

Здравствуйте! Есть форма. Валидируется через 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>
  • Вопрос задан
  • 58 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы