Vue 3 & Typescript:Vee-validate useResetForm在提交时无效

kgqe7b3p  于 2023-05-08  发布在  TypeScript
关注(0)|答案(1)|浏览(216)

我一直在尝试在提交后重置表单数据,但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>
n9vozmp4

n9vozmp41#

你可以从onSubmit事件中使用formActions: FormActions<any>
这里有一个例子

const onSubmit = (model, formActions) => {
  formActions.resetForm()
}

在你的html里

<Form
     @submit="onSubmit"
     :validation-schema="schema"
     v-slot="{ errors }"
   >

以下是文档的链接:https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms/#handling-resets

相关问题