I've been struggling to reset form data after submission, and it seems like the useResetForm hook isn't working as expected.
Code Section
<script setup lang="ts">
import CircularProgress from "@/components/CircularProgress.vue"
import { Field, Form, useResetForm } from "vee-validate"
import * as Yup from "yup"
import { useLazyQuery, useResult } from "@vue/apollo-composable"
import { FORGOT_PASSWORD } from "./gql"
const { loading, load, error, result } = useLazyQuery(FORGOT_PASSWORD)
const schema = Yup.object().shape({
email: Yup.string().required("Email is required").email("Email is invalid"),
})
const onSubmit = async (value: Record<string, any>) => {
let variables = value
load(undefined, variables)
let res = useResult(result, null, (data) => data.forgotPassword)
useResetForm() // Not functioning properly
}
</script>
<h3>This is the template structure I have:</h3>
<pre><code><div class="flex-auto px-4 lg:px-10 py-10 pt-0">
<Form
@submit="onSubmit"
:validation-schema="schema"
v-slot="{ errors }"
>
<div class="relative w-full mb-3">
<label
class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="grid-password"
>
Email
</label>
<Field
name="email"
type="email"
:class="{ 'border-rose-500 border-2': errors.email }"
class="border-0 px-3 py-3 placeholder-gray-400 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring-2 focus:ring-sky-400 w-full"
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acc9d4cdc1dcc0c9ecc6c3c4c2c8c3c982c5c3">[email protected]</a>"
style="transition: all 0.15s ease 0s"
/>
<p class="text-red-500 mt-1 text-xs">
{{ errors.email }}
</p>
<p
v-if="error?.message"
class="text-red-500 mt-1 text-xs"
>
{{ error?.message }}
</p>
</div>
<div class="text-center mt-6">
<button
class="bg-blue-600 text-white active:bg-blue-800 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full flex justify-center align-center"
type="submit"
style="transition: all 0.15s ease 0s"
>
<CircularProgress v-if="loading" />
Send Reset Link
</button>
</div>
</Form>
</div>