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 = 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>
===》這樣渲染的輪播就可以生效了