Vue組件$（...）。owlCarousel不是函數

我有下一個問題。我使用Laravel 5.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); 
} 
});

當我加載頁面時，它是我的貓頭鷹HTML結構工作得很好，但是當我嘗試使用內貓頭鷹旋轉木馬我vue組件會告訴我下一個錯誤。

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

我有我的HTML底部的下一個代碼

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

，我不知道是否我需要NPM來intall它，我一直在尋找在NPM和我不」 t找到它然後我在我的資產文件中添加css和js文件。

任何想法？在此先感謝。

來源

2017-03-31 Jhon Lemmon

我在接下來的方式解決了這個：

我查誰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}); 
     } 
    } 
    }

我希望可以幫助到別人的進口。

來源

2017-03-31 21:48:35

我認爲這是你在找什麼：

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

他們還對使用它的WebPack，希望幫助指導！

來源

2017-03-31 19:15:17 aks

Vue組件$（...）。owlCarousel不是函數

回答

相關問題