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

Question

我有下一期。

我用的是Laravel5.4和vue组件。我想在我的应用程序中使用猫头鹰旋转木马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结构工作得很好，但是当我尝试在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

我用下一种方法解决了这个问题：

我查过了匿名者给我的链接，谢谢你。

我在我的手表poperty中声明了我的v-模型的名称，在我的例子中是houses，在我创建的方法中，我从api调用值，在我的手表中检测变化，然后用窗口初始化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});
        }
    }
  }

我希望能帮助别人。

Answer 2

我想这就是你要找的：

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

他们还教webpack如何使用它，希望能有所帮助！