Creating a dynamically stepper in vue

I found some great stepper examples here: https://vuetifyjs.com/en/components/steppers/

Yet, I have multiple steps and most of the code is the same. Only thing that is really changing is:

  1. The title of the step
  2. The number of the step
  3. The number given to the functions (in this mwe just if complete < stepnumber)
  4. The component loaded
  5. One step is hidden with v-if (not included in this mwe)

Most examples did it the same way as I did: writing each and every step per hand. But I would much rather like to load it with for example a foreach loop ... so that the steps would be like:

    FOR n in ITEMS
    <v-stepper-step
      :complete="e6 > n"
      step="n"
    >
      titleList[n]
    </v-stepper-step>

    <v-stepper-content step="n">
      componentList[n]
    </v-stepper-content>

Here my mwe:

ChildOne

<template>
   <H1>CHILDONE/>
</template>

<script>
export default {
   name: 'ChildOne'
}
</script>

ChildTwo

<template>
   <H1>CHILTWO/>
</template>

<script>
export default {
   name: 'ChildTwo'
}
</script>

ChildThree

<template>
   <H1>CHILDTHREE/>
</template>

<script>
export default {
   name: 'ChildThree'
}
</script>

ChildFour

<template>
   <H1>CHILDFOUR/>
</template>

<script>
export default {
   name: 'ChildFour'
}
</script>

Stepper component:

<template>
  <v-stepper
    v-model="e6"
    vertical
  >
    <v-stepper-step
      :complete="e6 > 1"
      step="1"
    >
      Head </br> 1
      <small>Summarize if needed</small>
    </v-stepper-step>

    <v-stepper-content step="1">
      <ChildOne />
    </v-stepper-content>

    <v-stepper-step
      :complete="e6 > 2"
      step="2"
    >
      Configure analytics </br> for this app
    </v-stepper-step>

    <v-stepper-content step="2">
      <ChildTwo />
    </v-stepper-content>

    <v-stepper-step
      :complete="e6 > 3"
      step="3"
    >
      Select an ad format and name ad unit
    </v-stepper-step>

    <v-stepper-content step="3">
      <ChildThree />
    </v-stepper-content>

    <v-stepper-step step="4">
      View setup instructions
    </v-stepper-step>
    <v-stepper-content step="4">
      <ChildFour />
  </v-stepper>
</template>

Script

<script>
  // import ChildOne from ... etc.
  export default {
    components: {ChildOne, ChildTwo, ChildThree, ChildFour},
    data () {
      return {
        e13: 2,
      }
    },
  }
</script>
Updated 2022-01-14 11:07:42Z by Korrola