我在一个 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 时，它说它始终有效，即使它不是。 我考虑过将它们放在同一个组件中，但不知道这会有什么不同。

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

最佳答案

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

https://github.com/logaretm/vee-validate/issues/3204

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

<ComponentWithForm />
<AnotherComponentWithForm />

https://stackoverflow.com/questions/67024358/