Vue JS: owl 轮播 item.index 无法更新数据

Question

我遇到的问题是 owl 轮播中发生的事件不会更新函数外的数据值

这是我的代码：

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 但当要求满足时, 它不会触发从 false 到 true 的变化。有什么原因吗？我该如何纠正？

Answer 1

好像是这个
的用法外部 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
  });
}

Vue JS: owl 轮播 item.index 无法更新数据

Vue JS: owl carousel item.index unable to update data

vue.js

owl-carousel