Inertia Form helper

[ninjaparade]

Currently with the Inertia form helper, you are able to create a reactive data representation of your data that you would use to send to the server.

an example in Vue 3 below.

const form = Inertia.form({ 'name': null, 'brilliantIdea': true})

and then once you're ready to submit this form you call

form.post('/not-trash')

so what if we could, rather than having to define the method and path for the form, when we submit, actually add that to the form object itself?

const form = Inertia.form({ 'name': null, 'brilliantIdea': true }, 'url': '/not-trash', 'method': 'post' })

and then you can just magically call

form.submit()

form.submit({
  preserveScroll: true,
  onSuccess: () => form.reset('password'),
})

I know what you're saying right now reading this, what a fantastic idea. Trust me I agree with you.

I think this would be awesome and well received by the Inertia community.

Thank you for your time, now a note from our creator.

[claudiodekker]

Hey @ninjaparade!

While I don't entirely hate this idea (I believe we even considered it when designing the form helper initially (cc @reinink)), it kind of gives you two different APIs to do the same thing, as well as that it creates confusing possibilities without really giving you that much benefit.

For instance, I can guarantee you that there's a few Inertia users out there who would definitely try obviously stupid stuff like this and complain on our issue tracker that it doesn't post:

const form = Inertia.form({ 'name': null, 'brilliantIdea': true }, 'url': '/not-trash', 'method': 'post' })

form.get('/foo')

Even more likely, they could try doing stuff like this, which is somewhat less-stupid but is still entirely valid syntax (methods and parameter-wise):

const form = Inertia.form({ 'name': null, 'brilliantIdea': true })

form.submit()

Finally, it adds a maintenance burden, as suddenly we'd have to support both syntaxes as far as changes/fixes/new features go, which will definitely limit us or could even create problems of their own at some point without really adding any new functionality.

So, yeah, in conclusion, while I definitely appreciate the idea, I'm personally not in favour of supporting it.

[reinink]

I think @ninjaparade's thinking here is that you might setup the form in a parent component, and then submit it in a child component. However, that child component may not have the correct context to know which url and method to use.

For example, consider both a CreateUser and EditUser page, that both use a UserForm component (since the forms are identical). The form could have the submit handler, and is unaware of the context. By defining it at the form level, and not on submit, you can get around this.

Of course, there are other ways of accomplishing this. For example, the UserForm could have a url and method prop, or even a submit event...which honestly might be the better approach here, now that I think of it.

<!-- CreateUser.vue -->
<template>
  <user-form @submit="form.post('/users')" />
</template>

<!-- EditUser.vue -->
<template>
  <user-form :user="user" @submit="form.put(`/users/${user.id}`)" />
</template>

[ninjaparade]

After reading your feedback I agree with you that it would be a bit of a nightmare to deal with.

I've landed on the form (child component) creating the Inertia form and emitting it up to the parent component on submit where the form can be submitted to the right endpoint using the right method, which in the case of a search I would PUT to /search as an example.