[踏み込み]vue-cli 3でswiper 4のloop:trueの場合、クリックイベントは無効になります

4727 ワード

プロジェクトのニーズは簡単で、各ラウンドマップをクリックして対応するリンクにジャンプしますが、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)
	}
}

随筆を踏んで、足りないところ、ご指導を歓迎します~