JQuery没有与Vuejs合作

Question

我正在尝试将一个JQuery插件,owl carousel添加到使用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();
    }
});

您可以从以下网址找到完整的代码:https://jsfiddle.net/v18yjmuq/12/

我似乎JQuery完成了它在Vuejs呈现列表之前的执行.如何避免这个问题？完全渲染Vuejs for循环项后,我可以运行JQuery吗？

Answer 1

在使用需要准备好DOM的jQuery插件时,您应该使用Vue.nextTick.

从vue.js文档:

将回调推迟到下一个DOM更新周期后执行.在更改了一些数据以等待DOM更新后立即使用它.

在您的情况下,您应该使用ready()方法的以下实现:

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