Form helper in inertiajs/inertia-vue3 Doesn't Work for Multiple Forms During Setup

jengtong commented 3 years ago

Versions:

@inertiajs/inertia version: #.#.#
@inertiajs/inertia-vue3 version: #.#.#

Describe the problem:

I tried to use UseForm helper in setup() with multiple forms like the following: setup() { const frmToken = useForm({ token: null, }); const frmOrder = useForm({ items: {}, }); return { frmToken, frmOrder }; } The frmOrder doesn't have the "items" in its data but having "token" instead. When I try to access items with frmOrder, the error message says this variable is undefined.

Steps to reproduce:

First declare the setup method as described above. Then declare a method like following: methods:{ getItems(){ return this.frmOrder.items; } }

getItems will return "undefined" instead of an empty object.

craigrileyuk commented 3 years ago

Wait, you're using both the setup() function and the methods property in the same file?

Pretty sure that considering the former uses the Composition API and the latter the Options API, you aren't going to be getting anything returned anytime soon.

You need to return the getItems function from within the setup(). You also can't use 'this' with the Composition API.

jimohalloran commented 3 years ago

I've been having a similar issue with multiple forms on the same page. The second form helper instance contains the fields with which the first was initialised, but not it's own. It's almost as though there's a single global form helper which is always returned. Here's some very simplified code which demonstrates the issue:

import { useForm } from '@inertiajs/inertia-vue3'

export default {
  setup(props) {
    const formOne = useForm({one: 1111})
    const formTwo = useForm({two: 2222})
    console.log(formOne.one) // Output: 1111
    console.log(formTwo.two) // Output: undefined
  }
}

This issue occurs with both the composition API, and the options API. It doesn't matter if the two form helper instances are in the same component (as above), or in separate components (as is the case in my application).

I am using: @inertiajs/inertia@0.8.6 @inertiajs/inertia-vue3@0.3.6 vue@3.0.11

:rotating_light::rotating_light: NOTE: When checking versions of components above I noticed that I was not running the latest inertia-vue3. I can repro this issue with 0.3.6, but after updating to 0.3.12 the issue is completely resolved. Both in the simple test case above, and in my application's "real" forms. So I'm posting this mainly to say, if you're having issues that sound like mine, then updating inertia-vue3 might help. Looking at the commits since 0.3.6 all of the changes relate to the form helper, but nothing seems like it would perfectly resolve my issue. However there's been a bunch of work around the "remember" functionality, so maybe that's it? :rotating_light::rotating_light:

jengtong commented 3 years ago

I've been having a similar issue with multiple forms on the same page. The second form helper instance contains the fields with which the first was initialised, but not it's own. It's almost as though there's a single global form helper which is always returned. Here's some very simplified code which demonstrates the issue:
import { useForm } from '@inertiajs/inertia-vue3'

export default {
  setup(props) {
    const formOne = useForm({one: 1111})
    const formTwo = useForm({two: 2222})
    console.log(formOne.one) // Output: 1111
    console.log(formTwo.two) // Output: undefined
  }
}
This issue occurs with both the composition API, and the options API. It doesn't matter if the two form helper instances are in the same component (as above), or in separate components (as is the case in my application).

I am using: @inertiajs/inertia@0.8.6 @inertiajs/inertia-vue3@0.3.6 vue@3.0.11

🚨🚨 NOTE: When checking versions of components above I noticed that I was not running the latest inertia-vue3. I can repro this issue with 0.3.6, but after updating to 0.3.12 the issue is completely resolved. Both in the simple test case above, and in my application's "real" forms. So I'm posting this mainly to say, if you're having issues that sound like mine, then updating inertia-vue3 might help. Looking at the commits since 0.3.6 all of the changes relate to the form helper, but nothing seems like it would perfectly resolve my issue. However there's been a bunch of work around the "remember" functionality, so maybe that's it? 🚨🚨

This is exactly the same issue I am facing right now. Let me update my inertia-vue3 and try again. Thank you for the advice.

devenjahnke commented 3 years ago

I believe this issue was addressed in #575

There is a new form options API, which allows you to set a form key (needed if there are multiple forms on the page),

// Vue 2
this.$inertia.form({
  email: null,
  password: null,
  remember: null,
}, {
  key: 'login',
  remember: false,
})

// Vue 3/React/Svelte
const form = useForm({
  email: null,
  password: null,
  remember: null,
}, {
  key: 'login',
  remember: false,
})

Hope that helps!

reinink commented 1 year ago

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️

inertiajs / inertia