vue中，swiper分页加载不出来，事件也不能触发

tuy

框架：vue-cli2 swiper4 vue-awesome-swiper3.1.3

能正常显示swiper，能正常自动轮播和滑动，就是分页器加载不出，on里的事件也无法响应，求大神们指导，谢谢

1. <swiper :options="swiperOption" ref="mySwiper">
   
2.     <swiper-slide v-for="item in componentData.tags" :key="item.id">
   
3.       <div   class="ladies-tag" :style="{ backgroundColor: getBgColor(item.bgstyle) }"   @click="toDetail(item.linkpath)" >
   
4.        <div class="ladies-tag-title">{{ item.title }}</div>
   
5.        <div class="ladies-tag-tagimg">
   
6.        <img :src="item.imgpath" :onerror="defaultImg" />
   
7.        </div>
   
8.       </div>
   
9.   </swiper-slide>
   
10.   <div class="swiper-pagination" slot="pagination"></div>

复制代码

1. data() {
   
2.   return {
   
3.     swiperOption: {
   
4.         slidesPerView: 'auto',
   
5.         freeMode: true,
   
6.         freeModeMomentumRatio: 1,
   
7.         freeModeMomentumVelocityRatio: 1,
   
8.         freeModeMomentumBounce: false,
   
9.        pagination: {
   
10.          el: '.swiper-pagination',
    
11.          clickable: true
    
12.       },
    
13.      on: {
    
14.         slideChangeTransitionStart: function() {
    
15.         console.log('slideChangeTransitionStart')
    
16.     }
    
17.   }
    
18. }
    
19.     }
    
20.   },

复制代码