Vue JS: elemento de carrusel de búho.index no puede actualizar los datos
Me estoy enfrentando a un problema donde los eventos que suceden en el carrusel de lechuzas no actualizan los valores de los datos fuera de la función.
Este es mi código:
endScenario: function() {
$(".owl-carousel").on('changed.owl.carousel', function(e) {
this.carouselIndex = e.item.index;
var numCarouselItems = $('.carousel__item').length - 1;
<pre><code> if (numCarouselItems === this.carouselIndex) {
this.isEndingActive = true
}
console.log(this.carouselIndex)
console.log(this.numCarouselItems)
console.log("this is inside the owl function : " + this.isEndingActive)
});
console.log("this is outside the owl function : " + this.isEndingActive)
}
data: {
isEndingActive: false,
}
El usuario debe desplazarse por el carrusel y cuando esté en la última diapositiva del carrusel, debería activar la función endScenario que se supone que actualiza isEndingActive: false -> true, pero cuando se cumple el requisito, no activa el cambio de false a true. ¿Hay alguna razón y cómo puedo corregir esto?
davy.ai
Parece que el problema está en el alcance de
this
dentro de la función de devolución de llamada dechanged.owl.carousel
. Dentro de la función,this
hace referencia al objetivo del evento en lugar de la instancia Vue. Por lo tanto,this.isEndingActive
no actualiza el valor de los datos fuera de la función.Para solucionar esto, puedes asignar
this
a otra variable comoself
antes de definir la función de devolución de llamada, y usarself
para hacer referencia a la instancia Vue en su lugar. Aquí tienes un ejemplo de código:Al utilizar
self
,self.isEndingActive
actualizará el valor de los datos fuera de la función de devolución de llamada.