vue和其他插件配合使用遇到的问题

vue和其他插件配合使用遇到的问题：插件无效，即插件初始化失败

一般情况，初始化插件要注意的有两点：

1、dom节点

2、渲染的数据

两点缺一，插件可能就达不到想要的效果。

目前我使用的解决办法：

1、在请求数据的回调方法中使用 vue 的 $nextTick（）；

2、在 vue 的 watch监听中使用 $nextTick（）；

如下例，使用 swiper 和 ckplayer：

​
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="video"></div>
        </div>
        <div class="swiper-slide" v-for="img in imgList">
            <a href="#">
                <img :src="'/'+img" style=" 100%;height: 5rem;">
            </a>
        </div>
    </div>
<!-- Add Pagination -->
     <div class="swiper-pagination"></div>
</div>
<script type="text/javascript">
        var fruitId="${fruitId}";
        var vim = new Vue({
              el: '#divAll',
              data () {
                return {
                    fruit:null,//水果详情
                    imgList:null,//轮播图列表
                }
              },
              methods:{
                getfruitDetail:function(){
                    axios.get('/api/spike_fruit_details.rm',{
                        params:{'fruitId':fruitId},
                        headers:{'token':sessionStorage.getItem("token")}
                    }).then(  response => {
                                  console.log(response);
                                  if(response.data.code==100){
                                      this.fruit = response.data.object.fruit; 
                                      this.imgList=this.fruit.imgs.split(',');
                                      
                                      //第一种方法：
                                      this.$nextTick(function(){//在此可操作dom节点
                                          //滑动轮播
                                          new Swiper('.swiper-container', {
                                              //......
                                          });
                                          //视频播放;
                                          var videoObject = {
                                                container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
                                                variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
                                                poster: '/'+this.fruit.imgHead, //封面图片
                                                video: '/' +this.fruit.url//视频地址
                                            };
                                          new ckplayer(videoObject);
                                         });
                                  }
                                }                     
                             )
                  .catch(function (error) { // 请求失败处理
                    console.log(error);
                  });
                },
              },
              created:function(){
                  this.getfruitDetail();
              },
              watch:{//第二种方法
                  fruit:function(){
                      this.$nextTick(function(){//在此可操作dom节点
                          //滑动轮播
                          new Swiper('.swiper-container', {
                              //......
                          });
                          //视频播放;
                          var videoObject = {
                                container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
                                variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
                                poster: '/'+this.fruit.imgHead, //封面图片
                                video: '/' +this.fruit.url//视频地址
                            };
                          new ckplayer(videoObject);
                         }); 
                  }
              }
            })
</script>

  注: nextTick：在下次 DOM 更新循环结束之后执行延迟回调。

    　watch：用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。

 另外还有一个简单粗暴的方法 ：setTimeout，但是，这种方式需要设置执行时间，由于渲染时间无法确定，有快有慢，就会出现不稳定的现象。