使用OwlCarousel與Vue.js的問題

Question

我使用vue.js和OwlCarousel，每次我使用v-for與旋轉木馬時，它都不會顯示旋轉木馬的樣式，它只顯示列中的圖像。

這

請求的API：

<script> 
export default { 
    data: { 
    videos_p: [] 
    }, 
    mounted() { 
    axios.get("xxxxxxxxxxx") 
     .then(response => { 
     this.videos_p = response.data 
     console.log(this.videos_p) 
     }) 
    } 
} 

$(document).ready(function() { 
    var owl = $('.owl-carousel'); 
    owl.owlCarousel({ 
    items: 4, 
    loop: true, 
    margin: 10, 
    autoplay: true, 
    autoplayTimeout: 900, 
    autoplayHoverPause: true, 
    responsiveClass: true, 
    responsive: { 
     0: { 
     items: 1, 
     nav: true 
     }, 
     600: { 
     items: 3, 
     nav: false 
     }, 
     1000: { 
     items: 5, 
     nav: true, 
     loop: false, 
     margin: 20 
     } 
    } 
    }); 

}) 
</script> 

，這是HTML：

<section id="demos"> 
    <div class="row"> 
     <div class="large-12 columns"> 
     <div class="owl-carousel owl-theme"> 
      <div class="item" v-for="video in videos_p"> 
      <img v-bind:src="video.image_url"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 

但每次我用它VUE時間不顯示我的旋轉木馬，只告訴我在列中的圖像，但如果我使用這樣的例子，它工作正常：

<section id="demos"> 
    <div class="row"> 
     <div class="large-12 columns"> 
     <div class="owl-carousel owl-theme"> 
     <div class="item"> 
     <img src="http://placehold.it/300x150&text=FooBar1"> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/300x150&text=FooBar1"> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/300x150&text=FooBar1"> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/300x150&text=FooBar1"> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/300x150&text=FooBar1"> 
     </div> --> 
     </div> 
     </div> 
    </div> 
    </section> 

任何想法，我在做一個mistak ê?????

Answer 1

你所尋找的是Vue-nextTick

正在發生的事情是JS在執行您的$（）。owlCarousel前愛可信在發送迴應，因爲你沒有當響應會收到你需要等待不知道直到收到axios的響應，然後立即執行Vue.nextTick（）中的代碼;

而另一個問題是this不指向Vue實例axios()因此您需要製作一個變量並將this存儲到它。

在你的方法，你叫愛可信的回調後，補充一點：

var vm = this; //declare this just BEFORE calling axios(); 
// The below are inside axios.then() 
vm.videos_p = response.data; 
Vue.nextTick(function(){ 
    $('.owl-carousel').owlCarousel({ 
    items: 4, 
    loop: true, 
    margin: 10, 
    autoplay: true, 
    autoplayTimeout: 900, 
    autoplayHoverPause: true, 
    responsiveClass: true, 
    responsive: { 
     0: { 
     items: 1, 
     nav: true 
     }, 
     600: { 
     items: 3, 
     nav: false 
     }, 
     1000: { 
     items: 5, 
     nav: true, 
     loop: false, 
     margin: 20 
     } 
    } 
    }); 
}.bind(vm)); 

然後完全。就緒刪除您的$（document）（）;

我會繼續在VueJS中做出method: {}，並將其稱爲installOwlCarousel，然後在我的process.nextTick()中調用它。 類似於：

data: { 
.... 
}, 
method: { 
installOwlCarousel: function(){ 
    $('.owl-carousel').owlCarousel({ 
    //my options 
    }); 
}, 
mounted: function(){ 
    var vm = this; 
    axios.get('...xx..') 
    .then((res)=>{ 
    vm.videos_p = res.data; 
    Vue.nextTick(function(){ 
    vm.installOwlCarousel(); 
    }.bind(vm)); 
    }) 
    .catch((err)=>{ 
    if(err) console.log(err); 
    }); 
} 
} 

希望這會有所幫助。