[Vuejs]-Multistep form vue

by

1👍

✅

I’d suggest to use dynamic components for this use case.

So that your form accept 1 child, which will change overtime.

<template>
  <Form>
    <component :is="currentStep" />
  </Form>
</template>

<script>
import Step1 from './Step1.vue'
import Step2 from './Step2.vue'

export default {
  data() {
    return {
      steps: [Step1, Step2],
      stepIndex: 0,
    }
  },
  methods {
    nextStep() {
      this.stepIndex++
    }
  },
  computed {
    currentStep() {
      return this.steps[this.stepIndex]
    }
  }
}
</script>
👤Kapcash

Leave a comment