swiper插件在vue中点击事件失效

首先安装vue-awesome-swiper

npm install vue-awesome-swiper --save

引用

/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';

Vue.use(VueAwesomeSwiper);

/*组件间引入*/
import {swiper,swiperSlide} from 'vue-awesome-swiper';
export default {
    data() {
        swiperOption: {
            slidesPerView: 4,// 每页展示几个
            slidesPerGroup: 4,// 每屏滚动几个
            pagination: {
                el: '.swiper-pagination',
                type: ''
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
            observer: true,    // 动态检查器,自动初始化swiper,默认为false
            observerParents: true,    //将observe应用于Swiper的父元素.当Swiper的父元素变化时,Swiper更新.如window.resize.
        }
    },
    components: {
        swiper,
        swiperSlide
    }
}

组件的用法：

 
       
            

                

                    {{item}}
                
             
         
     

     

     

 

相关资料：

https://www.npmjs.com/package/vue-awesome-swiper

https://surmon-china.github.io/vue-awesome-swiper/