Incorrect Problem Reported with VeeValidate

[JohnCampionJr]

Hi, made a test repo, thinking this was an issue with VeeValidate. But the error only appears in VS Code with Volar. Vetur does not indicate this problem, which leads me to think its a Volar issue.

https://github.com/JohnCampionJr/vee-validate-vue3-ts

Volar throws an error in the validation page, with the VeeValidate Form submit handler having more than one property.

[johnsoncodehk]

Hi @JohnCampionJr, the onSubmit function is not matching for @submit emit type, Vetur no errors because it do not support events type checking.

The original @submit type of (payload: Event) => void is come from vue library, if @submit of vee-validate From should be other type, vee-validate should define they own onSubmit prop to override the original type. You should open a issue to vee-validate for that.

[JohnCampionJr]

OK, I've contacted them, thanks.

[logaretm]

Hello @johnsoncodehk, vee-validate author here. great work with volar.

I tried adding a onSubmit prop like you suggested on the Form component and it didn't work, it tries to match it to both (payload: Event) => void and the custom vee-validate type.

Type '(values: any, actions: any) => void' is not assignable to type 'SubmissionHandler<Record<string, any>> & ((payload: Event) => void)'.ts(2322)

I think it shouldn't try to intersect the custom prop with & ((payload: Event) => void)

Any pointers?

[johnsoncodehk]

Hi @logaretm, sorry I just found this is a types bug from Volar when props duplicate name with HTMLAttributes. I will publish a new version to fix now.

[JohnCampionJr]

You are both amazing coders - thanks for fixing this!

[johnsoncodehk]

please try 0.19.6.

and I found a other problem you may need to note. your component name Form is duplicate name with native elements, so props autocomplete is broke, if you need autocomplete, you need to rename Form for now, I will fix it.