JQuery 不适用于 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

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

Answer 2

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 3

Vue.nextTick will work in most of the cases, alternatively, you can write your code in the built-in updated() method.

updated(){
   // the method called when DOM gets updated
   // write jquery code here 
}

Answer 4

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