我一直在尝试在提交后重置表单数据,但useResetForm
钩子似乎不起作用。
脚本段
<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() // Does not work
}
</script>
模板设置如下:
<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="example@johndoe.io"
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>
1条答案
按热度按时间n9vozmp41#
你可以从
onSubmit
事件中使用formActions: FormActions<any>
。这里有一个例子
在你的html里
以下是文档的链接:https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms/#handling-resets