Getting the current position of the slide when you swipe on VueJS? - vue.js

Question

So basically, i'm trying to get the position of the slide and then update the html by adding a class to that slide. But I can't figure out how to get the current position everytime I swipe, how to update the swipe_active data.
This is the vue js file.
mounted(){
let element = document.getElementById('mySwipe');
if (window.innerWidth< 550){
window.mySwipe = Swipe (element, {
startSlide: 1,
auto: 0,
autoRestart: true,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, element) {},
transitionEnd: function(index, element) {}
});
}
this.swipe_active = window.mySwipe.getPos();
}
This is the html
<div :class="{black_swipe : swipe_active === 0 }"></div>
<div :class="{black_swipe : swipe_active === 1 }"></div>

Answer 1

mounted hook is called only once i.e when the component is finished mounting the DOM.
There is a callback property your have available in the config option you pass while creating a new Swipe instance. This property takes a function that will be called after every slide change
you can use this to update the swipe_active data.
mounted(){
let element = document.getElementById('mySwipe');
if (window.innerWidth< 550){
window.mySwipe = new Swipe (element, {
startSlide: 1,
auto: 0,
autoRestart: true,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: this.swipeCallback,
transitionEnd: function(index, element) {}
});
}
this.swipe_active = window.mySwipe.getPos();
},
methods: {
swipeCallback(index, element){
this.swipe_active = window.mySwipe.getPos();
}
}