Vue.JS Owl-Carousel-2 无法响应

Question

我正在开发一个由 Owl Carousel 为 Carousel 目的完成的应用程序，这里可以使用下面的 NPM 包

https://www.npmjs.com/package/vue-owl-carousel2

一切都很好，但是响应式出现了问题，例如轮播选项说响应式在对象选项下工作，但实际上它不起作用。

这是我的 sn-p 代码：

import carousel from 'vue-owl-carousel2';
export default {
    name: 'Team',
    components: { carousel }
}

<carousel 
  :items = 5
  :autoplay = "true" 
  :nav = "false"
  :dots = "true"
  :loop = "true"
  :margin = "30"
  :autoplaySpeed = "true"
  :autoplayTimeout = "5000"
  :responsive = "{
     0:{items:1},576:{items:2},768:{items:2},1200:{items:4},1500:{items:5}
  }"
>

    <div class="team-image">
          <img src="/image/1.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/2.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/3.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/4.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/5.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/6.jpg" alt="image">
    </div>
</carousel>

但是这 5 个项目甚至显示了一个移动设备而不是所有设备。

我该如何解决？

谢谢

Answer 1

设置“responsivebaseelement”解决了这个问题。它可以设置为您的包装类。将其设置为“body”对我有用。

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#responsivebaseelement

“responsivebaseelement”的默认值为“window”。而且我猜 vue 不能正常工作。

<carousel 
   :items = 5
   :autoplay = "true" 
   :nav = "false"
   :dots = "true"
   :loop = "true"
   :margin = "30"
   :autoplaySpeed = "true"
   :autoplayTimeout = "5000"
   :responsive = "{
        0:{items:1},576:{items:2},768:{items:2},1200:{items:4},1500:{items:5}
   }"
   responsivebaseelement="body"
>
.....
</carousel>