Complete form steps up until a point

Complete forms steps up until a point eg. when loading a partially filled in form.

If we have a form with eg. 5 steps and we want to complete the steps up until step 3 (eg. when loading a stepped form with partially filled in data) and go to step 3, we can do the following:

vue

<template>
  <Vueform ref="form$">
    <template #empty>
      <FormSteps>
        <FormStep name="first" />
        <FormStep name="second" />
        <FormStep name="third" />
        <FormStep name="fourth" />
        <FormStep name="fifth" />
      </FormSteps>
    </template>
  </Vueform>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const form$ = ref(null)

onMounted(() => {
  let step = 'third' // change this to the step you need
  let index = form$.value.steps$.steps$[step].index

  // go to 'third' step and enable all steps before
  form$.value.steps$.goTo(step)

  // complete all steps before 'third' step
  form$.value.steps$.steps$Array.forEach((step$) => {
    if (step$.index < index) {
      step$.complete()
    }
  })
})
</script>

Here's how we can save form data in the background as the user fills in the steps:

Complete form steps up until a point ​

Complete form steps up until a point