Bootstrap Vue is easy to use and usuful component for Vue.js. Howver, it does not have Stepper component like Vuetify - Stepper or vue-stepper.
# Create stepper by Cards and Progress components
To create a simple stepper dialog using Cards and Progress components from Bootstrap Vue.
# Calculate a step progress by computed property
Create a computed property to calculate percentage of progress by maximum page count and current step position.
computed: {
progress: function() {
return Math.round(100 / this.max_step) * this.current_step;
}
},
Use v-bind to bind the percentage of progress for progress bar.
<b-progress :value="progress" variant="success"></b-progress>
# Event handler for back and forward step
Create methods to handle events when buttons are clicked for step back and forward. These events are binding to button components by v-on directive.
<b-card v-if="current_step==2" class="card-style" title="STEP2">
<b-card-text>Do something for second step.</b-card-text>
<b-button class="float-left" variant="secondary" @click="onClickBack">Back</b-button>
<b-button class="float-right" variant="primary" @click="onClickNext">Next</b-button>
</b-card>
methods: {
onClickNext: function() {
this.current_step++;
},
onClickBack: function() {
this.current_step--;
},
onClickFirst: function() {
this.current_step = 1;
}
}