Owlcarousel does not respect styles with vue.js

Question

Owlcarousel does not respect styles with vue.js

Navigation

#1 by (1 votes)

0

I am using vue.js with rails and adding owlcarousel for the project with static images works without any problem and is shown as follows:

but when I use it dynamically with vue requesting an API send me the images without respecting the carousel this is the code:

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>

and this is how it is printed in 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>

and the image is displayed as follows:

I have to refresh the page 2 times to make the loaded and accept the styles.

Any ideas that may be causing this error ????

api vue.js owl

asked by JULIO MACHAN 12.07.2017 в 18:17

source

1 answer

ClearInterval does not work in slider Refresh table when an item is updated

score 1 · Accepted Answer

You must wait for the service to return all the data you want owl carousel to process.

When you work with libraries that modify the DOM directly (like owl carousel) you should use the nextTick that allows you to execute code once Vue finished processing the state of your component.

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>

I leave you a fiddle where you can see it working link