Retrieving the current step with BS-stepper-CodePudding

Any idea how can I get the current page with the bs-stepper? I've been trying to deal with that for like an hour now.

The code now:

<script>
    var stepper = new Stepper($('.bs-stepper')[0]);
</script>

Thanks in advance!

CodePudding user response：

The stepper instance has a "private" but accessible property _currentIndex. See this pen: https://codepen.io/Hazzamanic/pen/KKvJqKR or the code below

You can also listen for a step change:

var stepperElement = document.getElementById('stepper');
var stepper = new Stepper(stepperElement);
// get current index from stepper
var currentIndex = stepper._currentIndex;

stepperElement.addEventListener('shown.bs-stepper', function (event) {
  console.log('Moved to step '   event.detail.indexStep)
})

Please note that the event is added to the element, not the instance of Stepper. Also, if you are using jquery, you will need to bind the event using .on() or retrieve the underlying dom element like so:

$("#stepper")[0].addEventListener('shown.bs-stepper', function (event) {
  console.log('Moved to step '   event.detail.indexStep)
})

CodePudding user response：

Try this

<script>
var stepper = new Stepper($('.bs-stepper')[0]);
let curPage = stepper._currentIndex;
</script>