JQuery没有与Vuejs合作

本文介绍了JQuery没有与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(); } });

您可以从以下网址找到完整的代码： jsfiddle/v18yjmuq/12/

You can find the entire code from: jsfiddle/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)) }