Doing more stuff inside v-enhance

[jangxyz]

(I was originally thinking of creating an issue, but found out it could've been my misunderstanding of the API. Changing it as a discussion)

This is what I want to achieve with v-enhance:

1. Control data before submission inside run() handler.
2. Check confirmation.
3. Submit actual request
4. Take the response and render stuff.

Here's the original code which I was doing something wrong:

<script setup>
const { data, enhance } = await useFormAction({
  run: async ({ cancel, submitForm }) => {
    // behaves differently when uncommenting the code below
    //const yes = confirm('really submit?');
    //if (!yes) {
    //  cancel: Cancel the default submission
    //  cancel();
    //  return;
    //}

    // do some work here...

    // submitForm: The default submit function
    const result = await submitForm() // Submit the form if valid ...
    console.log("🚀 back from submission:", result);
  }
})
</script>

1. Odd form submission behavior

I was observing weird behaviors of having form submitting twice, and sometime once.. and I think I now know why.

Somehow I had the idea that cancel() is cancelling the whole thing, and submitForm() is "continuing the submission". So I was thinking 'in order to not to cancel, and keep on submitting', I need to not call the cancel() method but call the submitForm().

And now, I think I have another idea, which is

• cancel cancels the submission, which means you need to call submit yourself.
• submitForm is sending a form submission, regardless of whether there previously were any. So If I had not cancel'ed it, there would be two requests.

So maybe a better code would be like:

<script setup>
const { data, enhance } = await useFormAction({
  run: async ({ cancel, submitForm }) => {
    cancel(); // should always cancel, if you want to do custom stuff

    const yes = confirm('really submit?');
    if (!yes) {
        return; // okay, we stop here.
    }

    // do some work here...

    // submitForm: The default submit function
    const result = await submitForm()
    console.log("🚀 back from submission:", result);
  }
})
</script>

2. submitForm return value

Another issue -- and this is the reason I am posting in spite of the embarrassing mistake -- is that I want to take the result of the response, and do some stuff here. However I cannot take the response and use it, because submitForm returns undefined. Is the data value in const { data } = await useFormAction(...) being updated? It doesn't seem so.
Currently I am calling another useLoader() after await submitForm(), and this looks weird.

It is documented that the type of submitForm is () => Promise<void>, so I would not get any returned value. This would be more of a feature request.

It there another way to achieve this in enhanced mode?

[Hebilicious]

Thanks for opening this discussion, it will be very helpful to improve the docs !

In the meantime, I think you'll find it instructive to look at the implementation https://github.com/Hebilicious/form-actions-nuxt/blob/main/packages/form-actions-nuxt/src/runtime/composables/useFormAction.ts

You are right, submitForm doesn't let you access the response, because it needs to handle potential redirects and errors, which is handled by the composable : https://github.com/Hebilicious/form-actions-nuxt/blob/075420a66afc4204c2150705ac706837c8dc2e4c/packages/form-actions-nuxt/src/runtime/composables/useFormAction.ts#L26C1-L46C4

We could provide a way for users to disable that handling, but I don't think there's a good use case for that.

You should get everything that you need inactionResponse, formResponse and result which are returned by the composable (in data).
(If you need to trigger some logic based on this, a custom vue watcher might be the best pattern)

The value should be updated yes, if it's not, that's a bug, please share a repo/stackblitz or open an issue.