javascript - vue3 + vee-validate - handleSubmit 不返回值

Question

我正在使用最新的[email protected]使用组合 API。我想使用当前的[email protected]根据他们的文件。但是当使用 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://codesandbox.io/s/vue3-vee-validate-handlesubmit-with-no-values-oj0ot?file=/src/App.vue

---

文档:

https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms#javascript-submissions-ajax

我有两个问题:

1. 为什么提交不会调用表单的validate()，并且结果在出现错误时不会阻止提交？
2. 为什么handleForm回调参数values为空？

我做错了什么？

Answer 1

令我惊讶的是，useForm/useField 调用的顺序很重要:当 useField 调用先进行时，useForm如下 - values 为空。当我将 useForm 放在第一个位置时 - 值不再为空。