VeeValidate 4：一页上的两个表单答案

【问题标题】：VeeValidate 4: two forms on one pageVeeValidate 4：一页上的两个表单
【发布时间】：2021-07-05 12:37:14
【问题描述】：

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

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

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

const { handleSubmit } = useForm();

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

const { validate, meta } = useForm()

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

有没有办法实现这一点，还是我必须有人解决它？

【问题讨论】：

【解决方案1】：

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

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

<ComponentWithForm />
<AnotherComponentWithForm />

【讨论】：