[踩坑]vue-cli3中当swiper4的loop:true时，点击事件失效

项目需求很简单，点击每张轮播图跳转到对应的链接，然而当loop设为true的时候，直接在swiper-slide绑定点击事件是失效的，而将loop设为false又不符合产品需求。

解决思路：
利用swiper的click事件，获取当前的轮播图的索引，从list中找到对应索引的url，再调用跳转方法

话不多说，直接上代码：

<div v-swiper:mySwiper="swiperOption">
	<div class="swiper-wrapper">
		<div class="swiper-slide" 
			v-for="item in dataList" 
			:key="item.id">
			<img :src="item.src">
		</div>
	</div>
</div>

data() {
  	var vm = this // 这一步很关键，用于在swiper内拿到vue变量
  	return {
  		swiperOption: {
	       loop: true,
	       on: {
	        	click: function() {
	        		var curIndex = this.realIndex // 这里的this指向的是swiper
	        		var curUrl = vm.dataList[curIndex].url
	        		vm.toFocusLink(curUrl)
	        	}
	       }
        },
        dataList: [] // 数据
  	}
},
methods: {
	// 链接跳转
	toFocusLink: function(url) {
		console.log(url)
	}
}

踩坑随笔，不足之处，欢迎指教~