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

Posted 2023-05-07

【中文标题】Vue JS：owl carousel item.index 无法更新数据

【英文标题】：Vue JS: owl carousel item.index unable to update data

【发布时间】：2022-01-20 02:55:59

【问题描述】：

我遇到了一个问题，即 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 但是当满足要求时，它不会触发从假到真的变化。有什么原因以及如何纠正这个问题？

【参考方案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
  );

【讨论】：

现在可以使用了。谢谢！