JQuery not working with Vuejs

Question

I'm trying to add a JQuery plugin, owl carousel to a list that rendered using Vuejs.

HTML

<h4>1. Vuejs rendered items with OWL Carousel (not working)</h4>
<div id="user" class="owl-carousel">
    <div class="item" v-for="user in users">{{ user.name }}</div>
</div>

<h4>2. Pure HTML with OWL Carousel (working)</h4>
<div class="owl-carousel">
    <div class="item">Sunny</div>
    <div class="item">Michel</div>
    <div class="item">Daneil</div>
    <div class="item">Sony</div>
</div>

JS

var list = new Vue({
    el: '#user',
    data: {
        users: []
    },
    methods: {
        listUsers: function() {
            var users = [
            {
                id: 1,
                name: 'John'
            },
            {
                id: 2,
                name: 'Deo'
            },
            {
                id: 3,
                name: 'Anjela'
            },
            {
                id: 4,
                name: 'Samantha'
            }
            ];
            this.$set('users', users);
        },

        installOWLcarousel: function() {
            $('.owl-carousel').owlCarousel();
        }
    },
    ready: function() {
        this.listUsers();
        this.installOWLcarousel();
    }
});

You can find the entire code from: https://jsfiddle.net/v18yjmuq/12/

I seem JQuery is complete it's execution before Vuejs rendered the list. How to avoid that issue? Can I run JQuery after fully rendered the Vuejs for loop items?

Answer 1

Add ref prop to #user element like this

<div id="user" class="owl-carousel" ref="carousel_or_anything">

Then in add mounted method to Vue component:

...
mounted: function(){
  jQuery(this.$refs.carousel_or_anything).owlCarousel();
}
...

Answer 2

This is really interesting. I think its taking some time to render the DOM and hence carousal is failing. Here I have added a setTimeout to add negligible delay and its working:

https://jsfiddle.net/v18yjmuq/13/

ready: function() {
    this.listUsers();
    var self = this;
    setTimeout(function() {
      self.installOWLcarousel();
    }, 0);
  }

Answer 3

You should use Vue.nextTick when using a jQuery plugin that needs the DOM to be ready.

From the vue.js documentation:

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

In your case you should use the following implementation of the ready() method:

ready: function() {
    this.listUsers();
    Vue.nextTick(function () {
        this.installOWLcarousel();
    }.bind(this))
 }

EDIT: For Vue 2 use mounted() or created()