HTML部分

<swiper :options="bannerOption" class="ba_s" ref="bannerSwiper" v-if="bannerList.length>0"><swiper-slide v-for="(item,index) in bannerList" :key="index"><img :src="item.bannerImg" alt="" /></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper>

在 loop 開啟的時候，dom 綁定事件是有問題的。因為在loop模式下slides前后會復制若干個slide，從而形成一個環路，但是卻不會復制綁定在dom上的click事件。
在swiper中的回調函數添加click事件。
js部分

import 'swiper/dist/css/swiper.css';import { swiper, swiperSlide } from 'vue-awesome-swiper';// import Swiper from 'swiper'import vueAccordion from './accordion/vue-accordion';let vm = null;export default {name: 'index',data () {return {// bannerOption: {// init:false,pagination: {el: '.swiper-pagination',},autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: false,},loop: true,notNextTick: true,observer:true,//修改swiper自己或子元素時，自動初始化swiperobserveParents:true,//修改swiper的父元素時，自動初始化swiperon:{click: function(e){const realIndex = this.realIndex;vm.toBannerDetail(realIndex) //要執行函數}},},}},created () {vm = this;}

總結

以上是生活随笔為你收集整理的vue swiper click失效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。