vue中使用swiper-slide时，循环轮播失效？

前言

　　vue 项目中使用时，组件swiper-slide 如果用v-for循环的话，loop：true 就不能无缝轮播，每次轮播到最后一张就停止了？？？

正文

　　代码如下：　　

 
    <swiper-slide v-for="(item, index) of showProduct" :key="index">
      
        
          

            

          
        
        
          
if="item.androidcode !== null && item.androidcode !== ''">
            

              
            
          
        
      
    
    

    

    

  

data数据：

swiperOption2: {
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: true,
        slidesPerGroup: 1,
        loop: true,
        pagination: {
          el: '.swiper-pagination-1',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }

这么写看似是没毛病的。可是loop：true这个条件就失效了。这是为啥呢？

仔细查看swiper文档。

　　loop

　　设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。

注意红字，在原本基础上复制若干个slide，可是在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swiper组件并复制了sliper

解决方法;

　　利用v-if的属性，v-if=showProduct.length，确保异步加载的数据已经返回后，再加载swiper组件

代码如下：

 v-if="showProduct.length">
    for="(item, index) of showProduct" :key="index">
      
        
          

            

          
        
        
          
if="item.androidcode !== null && item.androidcode !== ''">
            

              
            
          
        
      
    
    

    

    

  

    for="(item, index) of showProduct" :key="index">
      
        
          

            

          
        
        
          
if="item.androidcode !== null && item.androidcode !== ''">