Vue Owl Carousel的loop配置项在Nuxt项目中无法正常生效问题

修复步骤 #

• 修正组件props的传值格式
  你当前传入的布尔、数值类型参数都是字符串格式，组件无法正确识别配置，需要给动态值添加v-bind（简写:）绑定，同时修正配置项拼写错误：

  <carousel
    :loop="true"
    :nav="true"
    :items="3"
    :dots="false"
    class="owl-guide-slider"
  >
  <!-- 子项内容保持不变 -->
  </carousel>
  

  注意原有配置的item是拼写错误，正确的展示数量配置为复数形式items。
• 补充引入owl carousel基础样式
  vue-owl-carousel不会自动引入依赖的样式文件，缺少样式会导致滚动计算异常，你需要在插件文件中新增样式引入：

  import Vue from 'vue';
  import carousel from 'vue-owl-carousel';
  // 新增样式引入
  import 'owl.carousel/dist/assets/owl.carousel.css'
  import 'owl.carousel/dist/assets/owl.theme.default.css'
  Vue.component('carousel', carousel);
  

• 检查子项样式配置
  不要给.guide-item设置固定宽度、强制边距等会影响carousel自动计算元素尺寸的样式，避免克隆元素宽度计算错误导致的跳变问题。

内容的提问来源于stack exchange，提问作者Michel Gisenaël