VeeValidate 4：一页上有两种形式

Question

我在一个 Vue 组件中有一个 Vue 组件，它们都包含一个我想单独验证的表单。

<form @submit="submitLogin">
  Input fields and button
</form>
<OtherComponent />

其他组件具有类似的形式。当我使用 handleSubmit 时，主组件会尝试处理所有输入字段，而 OtherComponent 中的 handleSubmit 根本不起作用。

const { handleSubmit } = useForm();

我也尝试了一种解决方法，我改为使用验证，手动运行对按钮点击进行验证并检查元有效以查看表单是否有效。

const { validate, meta } = useForm()

这里发生了同样的事情，因为两个组件都使用 validate useForm，所以它弄乱了 OtherComponent 的组件。当我检查 meta 时，它说它始终有效，即使它不是。我考虑过将它们放在同一个组件中，但不知道这会有什么不同。

有没有办法实现这个，还是我必须找人解决这个问题？

Answer 1

我遇到了同样的问题，你可以在 vee-validate 上跟踪这个问题 github:

目前，为避免此错误，您必须为每个表单释放一个包装器组件，如下所示：

<ComponentWithForm />
<AnotherComponentWithForm />

VeeValidate 4: two forms on one page