原文链接
前言
在vue项目中,使用vue-awesome-swiper实现轮播业务。安装的vue-awesome-swiper是最新版本的,基于swiper4的实现。
问题
在最新的swiper中,swiper绑定的事件中,是通过this指向当前swiper对象的。而在事件回调中,我们需要获取vue页面data中的数据。但是此时的this并不指向vue对象。
解决
HTML:
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-if="imgList.length>0" v-for="(item,index) in imgList" :key='index'>
<img :src="item.imgurl">
</swiper-slide>
</swiper>
JS:
data() {
return {
swiperOption: {
notNextTick: true,
autoplay: 3000,