TS Error with actions as parameter in Submit

[JohnCampionJr]

Working on learning vee-validate.

I'm trying to add the actions parameter as shown here:
https://vee-validate.logaretm.com/v4/guide/handling-forms#setting-errors-manually

Using Vue3, Composition API. I do get the actions and values, but I also get this error from typescript

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

Any guidance on how to solve this?

[logaretm]

Could you create a code sample? either a codesandbox or a repo would be fine.

[JohnCampionJr]

Here you go.

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

It seems to just be a type issue as it actually works just fine (which is why I wasn't sure if I should make an issue or a discussion)

VS Code throws a TS error on the @submit handler if I put two parameters in. I tried renaming Form to VeeForm to see if it was parsing the form element wrong or something, but it didn't change it.

[JohnCampionJr]

I think I figured it out. It seems more likely to be a glitch with Volar.

https://github.com/johnsoncodehk/volar/

If I switch Volar off, the error disappears (and ESLint still works which is why I think its the Volar extension)

[JohnCampionJr]

See the reply on the Volar repo:
vuejs/language-tools#41

[logaretm]

You are right, looks like I need to expose these types as well. Will do it later today.

[JohnCampionJr]

Now it all works :) Might want to add to docs as the line

const onSubmit = (values: any, actions: SubmissionContext) => {

is not wildly obvious.

[upwebdesign]

vee-validate: vee-validate@4.5.4
vue@3.2.20

I've tried getting this to work and cannot. In this case I am doing:

function onSubmit(values: any, { setFieldError }: any): void {
}

and this is the error I am getting:

Type '(values: any, { setFieldError }: any) => void' is not assignable to type 'SubmissionHandler<GenericFormValues, unknown> & ((payload: Event) => void)'.
  Type '(values: any, { setFieldError }: any) => void' is not assignable to type '(payload: Event) => void'.

61                     <Form @submit="onSubmit" v-slot="{ isSubmitting }" class="space-y-2 divide-y divide-gray-200">

When trying:

function onSubmit(values: any, actions: SubmissionContext): void {
}

I get the following error:

Type '(values: any, actions: SubmissionContext<GenericFormValues>) => void' is not assignable to type 'SubmissionHandler<GenericFormValues, unknown> & ((payload: Event) => void)'.
  Type '(values: any, actions: SubmissionContext<GenericFormValues>) => void' is not assignable to type '(payload: Event) => void'.

61                     <Form @submit="onSubmit" v-slot="{ isSubmitting }" class="space-y-2 divide-y divide-gray-200">

Im not sure if this is enough information. Not sure if this issue has popped up again with a newer release of vee-validate.

[alexrafuse]

@upwebdesign Did you ever find a solution to this? I'm running into the same issue.

[upwebdesign]

@alexrafuse I believe I abandoned this approach completely and handled my own error messaging.