使用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); 
    }); 
} 
} 

希望这会有所帮助。