inertia-vue3@v0.3.6

Published on March 26, 2021
  • Updated form helper to automatically remember form data (#575).
  • Updated form helper to be reactive (#432, #575).
  • Added new form helper options (#575).
  • Fixed bug with remembering null form data (#417, #575).
  • Fixed bug with accessing form state in visit callbacks (#410).
  • Fixed bug with deep cloning default form data (#455, #575).
  • Fixed bug with remembering array form values (#552, #575).
  • Fixed bug with resetting array form values (#553, #575).
  • Added typescript definitions (#502).
  • Fixed bug with self-closing Inertia links (#306).

Automatic remembering of form data

The form helper now automatically remembers form data and errors. Previously you had to do this manually:

// Options API
remember: 'form'

// Composition API
useRemember(useForm({ ... }))

Doing this automatically is not only easier, but it's also more in line with default browser behaviour.

If you need to disable this behaviour, you can do that using the new remember form helper option (see below).

Form helper options

The form helper now accepts a second "options" argument. This lets you set a form key, needed if there are multiple forms on the page. You can also disable the automatic remember behaviour by setting the remember option to false.

let form = useForm({
  email: null,
  password: null,
}, {
  key: 'login',
  remember: false,
})

Fixed issue with accessing form state in visit callbacks

This release fixes a tricky, edge case issue with the form helper, where the preserveState and preserveScroll visit callbacks didn't have access to the updated form state until it was too late.

preserveScroll: () => this.form.hasErrors, // old form values
preserveState: () => this.form.hasErrors,  // old form values

The workaround was to use the page object passed to these callbacks instead. Unfortunately, this is kind of verbose.

preserveScroll: (page) => Object.keys(page.props.errors).length > 0,
preserveState: (page) => Object.keys(page.props.errors).length > 0,

This issue has now been corrected, and you can reference the form helper methods and properties directly within these callbacks without issue.