我使用的是最新的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
为空?
我哪里做错了?
2条答案
按热度按时间sdnqo3pr1#
我认为您的第一个示例不起作用,因为您使用了
useForm
两次,并且必须使用它一次我已经在你的例子上测试了这段代码,它对我很有效
kiayqfof2#
令我惊讶的是,
useForm
/useField
调用的顺序很重要:当useField
调用第一个,useForm
跟随-values
是空的。当我把useForm
放在第一个位置-值不再是空的。