Multistep form vue

Question

**I'm trying to reform a multistep form, but my first step and second step are visualised both at the same time now. Even though my app data is having an activePhase data stored. It seem like I should be using as a method some emit logic? Or as I'm usin Provide/Inject I should use Reactivity as here - https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity ?

See the link please - https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Step2.vue**

<template v-if="activePhase == 2">
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>Payment Amount</label
        ><input
          name="paymentAmount"
          v-model="paymentAmount"
          placeholder="Your payment amount"
          class="form-control"
        />
      </div>
      <div class="form-group">
        <label>Account Number</label
        ><input
          name="accountNumber"
          v-model="accountNumber"
          placeholder="Your account number"
          class="form-control"
        />
      </div>
      <button type="button" @click.prevent="goToStep(3)" class="btn">
        Continue
      </button>
    </div>
    <Button />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  components: {
    Button,
  },
  inject: ["activePhase", "paymentAmount", "accountNumber"],
  methods: {
    goToStep(step) {
      this.activePhase = step;
    },
  },
};
</script>

<style>
</style>

score 1 · Accepted Answer · answered Feb 23 '23 at 09:09

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>

answered Feb 23 '23 at 09:09

Kapcash

6,377
2
18
40

Thank you! I replaced the code, but now getting the Maximum call stack size exceeded Error. As well in IDE. What should I do ? https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Form.vue – Feb 23 '23 at 13:46
1

Your `Form` component calls himself, hence the recursive calls and max call stack exceeded. Just remove the `
` and only keep the ``
– Kapcash Feb 23 '23 at 14:25
But what i'd I'd like to keep the structure with a nested Form component with two child components ? – Feb 24 '23 at 06:13
What do you mean a nested Form? You could, but just be careful it's not going into an infinite recursive loop. – Kapcash Feb 24 '23 at 08:44
Ok, thanks. But what if I'd like to have the data not inside the Form component but inside the app.vue file. How would it look like ? – Feb 26 '23 at 09:41

Multistep form vue

1 Answers1