JQuery没有与Vuejs合作 [英] JQuery not working with Vuejs

问题描述

我正在尝试将一个JQuery插件，owl轮播添加到使用Vuejs呈现的列表中。

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

<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

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/

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

我好像JQuery已经完成它的执行在Vuejs呈现列表之前。如何避免这个问题？完全渲染Vuejs for循环项后可以运行JQuery吗？

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?

推荐答案

你应该使用 Vue.nextTick 。

来自vue.js文档：

From the vue.js documentation:

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

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.

在你的你应该使用ready（）方法的以下实现：

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

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

这篇关于JQuery没有与Vuejs合作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！