43 lines
1.2 KiB
HTML
43 lines
1.2 KiB
HTML
<div id="app">
|
|
<div v-for="(step, index) in steps" :key="index" v-show="currentStep === index">
|
|
<h2>Step {{ index + 1 }}</h2>
|
|
<div v-html="step.content"></div>
|
|
<button v-if="currentStep > 0" @click="prevStep">Previous</button>
|
|
<button v-if="currentStep < steps.length - 1" @click="nextStep">Next</button>
|
|
<button v-if="currentStep === steps.length - 1" @click="submitForm">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
currentStep: 0,
|
|
steps: [
|
|
{ content: '<div>Step 1 content goes here</div>' },
|
|
{ content: '<div>Step 2 content goes here</div>' },
|
|
{ content: '<div>Step 3 content goes here</div>' },
|
|
{ content: '<div>Step 4 content goes here</div>' },
|
|
{ content: '<div>Step 5 content goes here</div>' },
|
|
{ content: '<div>Step 6 content goes here</div>' }
|
|
]
|
|
},
|
|
methods: {
|
|
nextStep() {
|
|
if (this.currentStep < this.steps.length - 1) {
|
|
this.currentStep++;
|
|
}
|
|
},
|
|
prevStep() {
|
|
if (this.currentStep > 0) {
|
|
this.currentStep--;
|
|
}
|
|
},
|
|
submitForm() {
|
|
alert('Form submitted!');
|
|
}
|
|
}
|
|
});
|
|
</script>
|