javascript vue 3 + vee-validate - handleSubmit不返回值

nzkunb0c  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(155)

我使用的是最新的vue@3.1.2和Composition API。我想根据他们的文档使用当前的vee-validate@4.4.5。但是当使用handleSubmit时,没有任何效果符合我的预期。

<form @submit="onSubmit">
  <div class="mb-3">
    <label for="edit-email" class="form-label">E-mail</label>
    <input
      id="edit-email"
      name="email"
      class="form-control"
      v-model="email"
      type="text"
      />
    <div class="invalid-feedback">{{ emailError }}</div>
  </div> 

  <button class="btn btn-primary" type="submit">Save</button> 
</form>
import { useField, useForm } from "vee-validate";
import { object, string } from "yup";

export default {
  name: "App",
  setup() {
    const { handleSubmit } = useForm();

    const onSubmit = handleSubmit((values) => { 
      console.log(values, submitCount.value); // values is empty: {}
    });

    const schema = object({
      email: string().required().email(),
    });

    useForm({
      validationSchema: schema,
      initialValues: {
        email: "",
      },
    });

    const { value: email, errorMessage: emailError } = useField("email");

    return {
      email,
      emailError, 
      onSubmit,
    };
  },
};

重现问题:
💡**一个
文件:
https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms#javascript-submissions-ajax
我有两个问题:
1.为什么submit不为表单调用validate(),结果在它们出错时不能阻止submit?
1.为什么handleForm回调参数values为空?
我哪里做错了?

sdnqo3pr

sdnqo3pr1#

我认为您的第一个示例不起作用,因为您使用了useForm两次,并且必须使用它一次
我已经在你的例子上测试了这段代码,它对我很有效

let response = ref("Empty.");

    const schema = object({
      email: string().required().email(),
      password: string().required().min(4),
    });

    const { errors: formErrors, handleSubmit, setFieldError, submitCount } = useForm({
      validationSchema: schema,
      initialValues: {
        email: "",
        password: "",
      },
      // validateOnMount: true,
    });
kiayqfof

kiayqfof2#

令我惊讶的是,useForm/useField调用的顺序很重要:当useField调用第一个,useForm跟随-values是空的。当我把useForm放在第一个位置-值不再是空的。

相关问题