Vue 组件 $(...).owlCarousel 不是函数

Question

我有下一期。

我正在使用 Laravel 5.4 和 vue 组件。我想在我的应用中使用 owl 轮播 2。

我在脚本标记中有下一个代码并且它有效：

$(".owl-1").owlCarousel({items: 1, singleItem:true, loop: true});

$(".owl-2").owlCarousel({items: 1, singleItem:true, loop: true,mouseDrag: false, touchDrag: false, pullDrag: false, freeDrag: false});

$(".owl-1").on('change.owl.carousel', function(event) {
 if (event.namespace && event.property.name === 'position') {
 var target = event.relatedTarget.relative(event.property.value, true);
     $(".owl-2").owlCarousel('to', target, 300, true);
 }
});

当我加载页面时它是我的 owl html 结构工作得很好，但是当我尝试在我的 vue 组件中使用 owl 轮播时它显示下一个错误。

$(...).owlCarousel is not a function.

我的 html

底部有下一个代码

<script src="/assets/js/owl.carousel.min.js"></script>
<script src="/assets/js/main.js"></script>

我不知道是否需要用 npm 安装它，我在 npm 中查找但没有找到它，然后我在资产文件中添加了 css 和 js 文件。

有什么想法吗？提前致谢。

Answer 1

我想这就是您要找的：

https://www.npmjs.com/package/owl.carousel

他们也有关于将它与 webpack 一起使用的说明，希望对您有所帮助！

Answer 2

我用下面的方法解决了这个问题：

我查看了 aks 给我的 link，谢谢。

我在我的手表属性中声明了我的 v 模型的名称，在我的例子中是房子，在我创建的方法中，我调用了 api 的值，在我的手表中检测到变化，然后我用 window 初始化了 owl 轮播。在 jquery 选择器之前。

我还添加了 owl.carousel

的导入

import 'owl.carousel'

export default {

data(){
 return {
     houses: []
   }
 },
created(){

  //Call api
  this.houses = response.data.houses;
},
watch: {

        /*
            Carousel Structure
         */
        houses() {

            let owl  = window.$(".owl-1");
            let owl2 = window.$(".owl-2");

            owl.owlCarousel({items: 1, singleItem:true, loop: true});;

            owl2.owlCarousel({items: 1, singleItem:true, loop: true,mouseDrag: false, touchDrag: false, pullDrag: false, freeDrag: false});
        }
    }
  }

希望对其他人有所帮助。

Vue 组件 $(...).owlCarousel 不是函数

Vue component $(...).owlCarousel is not a function

owl-carousel-2

vuejs2