Question

我有下一期。

我正在使用带有vue组件的Laravel 5.4。我想在我的应用程序中使用owl carousel 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);
 }
});

当我加载页面时，我的猫头鹰html结构运行得很好，但是当我尝试在我的vue组件中使用owl carousel时，它会向我显示下一个错误。

$(...).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

我在下一个方面解决了这个问题：

我检查了aks给我的链接，谢谢你。

我在我的手表中声明了我的v模型的名称，在我的案例中是房子，在我创建的方法中，我从api调用值并在我的手表中检测到变化，然后我初始化了猫头鹰旋转木马窗口。在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中使用它的说明，希望有所帮助！

Vue组件$（...）。owlCarousel不是一个函数

2 个答案: