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:
- The title of the step
- The number of the step
- The number given to the functions (in this mwe just if complete < stepnumber)
- The component loaded
- 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