首页 > 代码库 > vue渲染数据后与owlCarousel轮播插件冲突,失效

vue渲染数据后与owlCarousel轮播插件冲突,失效

主要原因:dom解析准备完成后,开始执行$(document).ready(); 而vue是在window.onload(页面加载完后才执行);所以会导致owlCarousel插件失效。

 

解决方案:数据渲染后,更新dom;再调用插件。(vue的 this.$nextTick可以更新dom)

1.引入owlCarousel插件,vue,jq

(function ($) {
new Vue({
el: ‘#owl-demo1‘,
data:{
aboutData:[],
getRouteUrl: ‘/resume‘
},
created: function () {
this.getRoute();
},
methods: {
getRoute: function () {
var that = this;
that.$http({
method: ‘GET‘,
url: this.getRouteUrl
}).then(function(response){
this.aboutData = http://www.mamicode.com/response.data;
this.$nextTick(function () { // ==》更新dom后,执行轮播
$("#owl-demo1").owlCarousel({
items : 1,
lazyLoad : false,
autoPlay : true,
navigation : false,
navigationText : false,
pagination : false,
});// => ‘更新完成‘
})
},function (error) {
console.log(error);
})
},

}

})
})(jQuery)
=======》这里用即时函数,使vue内可使用jq,因为owlCarousel 是jq插件。

<div id="owl-demo1" class="owl-carousel">
<div class="item" v-for="value in aboutData">
<h2>{{value.title}} <span>{{value.name}}</span></h2>
<p>{{value.content}}</p>
</div>
</div>
===》这样渲染的轮播就可以生效了

vue渲染数据后与owlCarousel轮播插件冲突,失效