Vue JS：owl carousel item.index 无法更新数据

Question

我遇到了一个问题，即 owl carousel 中发生的事件不会更新函数外部的数据值

这是我的代码：

endScenario: function() {
                $(".owl-carousel").on('changed.owl.carousel', function(e) {
                    this.carouselIndex =  e.item.index;
                    var numCarouselItems = $('.carousel__item').length - 1;


                    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,
}

用户应该在轮播中滚动，当用户在轮播的最后一张幻灯片时，它将触发 endScenario 函数，该函数假设更新 isEndingActive: false -> true 但是当满足要求时，它不会触发从假到真的变化。有什么原因以及如何纠正这个问题？

Answer 1

好像this的用法
外面的 this 不等于里面的 this
可以通过箭头函数解决

 $(".owl-carousel").on('changed.owl.carousel', e => {}

或者你可以保存一个变量

endScenario: function() {
  const self = this;
  $(".owl-carousel").on('changed.owl.carousel', function(e){
     //use self replace this
  });
}