Vue 3 Form Submission: How to Handle Validation Errors on Async Submission Without Losing User Input?
After trying multiple solutions online, I still can't figure this out... I'm working with an scenario with form submission in my Vue 3 application. I'm using VeeValidate for form validation, and I'm trying to implement an async form submission using Axios to post data to my server. The question arises when the validation fails after I've already filled out the form. The user inputs are getting lost on re-render, which is frustrating for users. I've set up my validation schema, but when the form fails validation and I return the errors, the input fields reset to their initial state. Here's a simplified version of my form component: ```vue <template> <form @submit.prevent="handleSubmit"> <div> <input v-model="formData.name" type="text" placeholder="Name" /> <span v-if="errors.name">{{ errors.name }}</span> </div> <div> <input v-model="formData.email" type="email" placeholder="Email" /> <span v-if="errors.email">{{ errors.email }}</span> </div> <button type="submit">Submit</button> </form> </template> <script> import { ref } from 'vue'; import { useForm } from 'vee-validate'; import * as yup from 'yup'; export default { setup() { const formData = ref({ name: '', email: '' }); const { handleSubmit, errors } = useForm({ validationSchema: yup.object({ name: yup.string().required('Name is required'), email: yup.string().email('Invalid email').required('Email is required'), }), }); const onSubmit = async () => { try { const response = await axios.post('/api/submit', formData.value); console.log(response.data); } catch (behavior) { // Handle errors here console.behavior(behavior); } }; return { formData, handleSubmit: handleSubmit(onSubmit), errors }; }, }; </script> ``` The validation triggers correctly, and I can see the behavior messages displayed next to the corresponding fields. However, when I go to fix the issues and resubmit, the form data resets and I have to re-enter everything. I've tried using `keep-alive` on the component, but that hasn't helped. I'm using Vue 3 and VeeValidate 4.5.0. Is there a recommended way to continue user input even when validation fails? Any insights or best practices would be greatly appreciated! For context: I'm using Vue on Windows. I'd be grateful for any help.