VeeValidate 4:一页上有两张表格

Question

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

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

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

const { handleSubmit } = useForm();

我还尝试了一种变通方法，即使用验证，手动对按钮点击进行验证，并检查元有效性以查看表单是否有效。

const { validate, meta } = useForm()

这里也发生了同样的事情，因为两个组件都使用validateuseForm，这会混淆OtherComponent的一个。当我检查meta时，它说它总是有效的，即使它不是。我曾想过把它们放在同一个组件中，但不认为这会有什么不同。

有没有办法实现这一点，或者我必须有人来解决它？

Answer 1

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

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

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

<ComponentWithForm />
<AnotherComponentWithForm />