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

Posted 2020-09-09 绯色璃

主要原因：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 = 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>
===》这样渲染的轮播就可以生效了