JQuery does not work with Vuejs

Question

I am trying to add a jQuery plugin, an owl carousel to the list that is displayed 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 all the code: https://jsfiddle.net/v18yjmuq/12/

JQuery seems to have completed it before Vuejs displays the list. How to avoid this problem? Can I start jQuery after fully displaying the Vuejs elements for the loop?

Answer 1

You must use Vue.nextTick when using the jQuery plugin, which needs the DOM to be ready.

From the vue.js documentation:

, DOM. , , DOM .

ready():

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

Answer 2

. , , DOM, , , . setTimeout, :

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

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

Answer 3

For me, the problem was in the .eslintrc.js file. It was just necessary to set jQuery to true in the env object.

env : {
    jquery:true
}