[Vuejs]-Components not rendered

by

0👍

✅

You should pass currentStep as a prop in your <Form /> component and instead of method use computed property to pass the component name dynamically.

computed: {
    currentStep() {
      return this.steps[this.stepIndex];
    },
  }

Live Demo : codesandbox

0👍

Because you haven’t passed currentStep to Form in App.vue

Please fix the following and it will work:

  • Delete currentStep from methods in App.vue
  • Add computed currentStep to App.vue:
...
  computed: {
    currentStep() {
      return this.steps[this.stepIndex]
    }
  }
...
  • add prop currentStep to Form in App.vue:
...
<Form
  ...
  :current-step="currentStep"
/>
...

also you should consider the new syntax of vue 3 or sfc

avoid using provide your code is crashing switch to props

Leave a comment