Estoy utlizado vue.js con rails y cabo de agregar owlcarousel para el proyecto con imagenes estaticas funciona sin ningun problema y se muestra de la siguiente forma:
pero cuando lo utilizo de forma dinamica con vue haciendo solicitud a una API me manda las imagenes sin respetar el carousel este es el codigo:
script:
<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>
y esto es como se imprime en el 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>
y la imagen es desplegada de la siguiente manera:
tengo que refrescar la pagina 2 veces para que realize el cargado y acepte los estilos.
alguna idea de que puede estar ocasionando este error????