Issue Using OwlCarousel with Vue.js

Question

I am using vue.js and OwlCarousel and every time I use the v-for with the carousel it doesn't show me the style of the carousel it only show me the Images in column.

this the request to an 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>

and this is the 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>

but every time that I use vue it doesn't show me the carousel it only show me the images in column, but if I use the example like this it works fine:

  <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>

any idea where I am making a mistake?????

Answer 1

What you are looking for is Vue-nextTick

What is happening is JS is executing your $().owlCarousel before axios is sending response, because you don't know when the response would be received you need to wait till the response from axios is received and then immediately execute the code in Vue.nextTick();

And the other problem is this doesn't points to Vue instance in axios() so you need to make a variable and store this to it.

In your method, after you calling axios callback, add 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));

and then completely remove your $(document).ready();

I would had gone ahead and made a method: {} in VueJS, and call it installOwlCarousel and then call it in my process.nextTick(). Something like:

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

Hope this helps.