0

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:

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

tengo que refrescar la pagina 2 veces para que realize el cargado y acepte los estilos.

introducir la descripción de la imagen aquí

alguna idea de que puede estar ocasionando este error????

1 respuesta 1

1

Debes esperar a que el servicio te retorne todos los datos que deseas que owl carousel procese.

Cuando trabajas con librerias que modifican el DOM directamente (como owl carousel) debes usar el método nextTick que te permite ejecutar codigo una vez Vue terminó de procesar el state de tu componente.

new Vue({
    el: '#demos',
  data: {
    videos: [],
  },
  mounted: function () {
  var self = this;
    $.ajax({ url: 'https://jsonplaceholder.typicode.com/photos?_start=10&_limit=10', method: 'GET'})
    .then((response) => {
        self.videos = response;
      self.$nextTick(() => {
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
      }
    }
  });            
      })
    });
  },
})
#demos {
  width: 600px;
  height: 600px;
}
<section id="demos">
  <div class="owl-carousel owl-theme">
    <div class="item" v-for="video in videos">
      <img v-bind:src="video.url">
    </div>
  </div>
  </section>

Te dejo un fiddle donde puedes verlo funcionando http://jsfiddle.net/wardo/rp3s73qw/7/

1
  • La forma Como lo ejecuto es el problema, gracias por la solucion, como lo estoy haciendo con ruby on rails le tuve que agregar el import vue from vue antes de que comienze el llamado axios, ya que no me reconocia la funcion. Commented el 18 jul. 2017 a las 18:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.