Submit data on form steps

Learn how to save form state when using steps.

We can subscribe to @next to automatically submit form data in the background as the user fills in the form:

vue
<Vueform @mounted="(form$) => {
  form$.steps$.on('next', async () => {
    let data = form$.options.formData(form$)
    
    try {
      await form$.$vueform.services.axios.post('/my/endpoint', data)
    } catch (error) {
      console.error('Couldn\'t save form data.', error)
    }
  })
}" />

This won't have any field validation, but generally fields are validated before the user can proceed to the next step and @next event is fired.

Alternatively we can subcribe to @previous or @select events.

Here's how we can load back data and enable steps up until a point:

Related RecipeComplete form steps up until a pointComplete forms steps up until a point eg. when loading a partially filled in form.
  
👋 Hire Vueform team for form customizations and developmentLearn more