vue项目使用swiper后边轮播组件点击不起作用

本文链接：https://blog.youkuaiyun.com/RedaTao/article/details/114847589

本文介绍了在Vue项目中使用Swiper轮播图时，遇到点击事件不生效的问题，通过调整DOM结构并重新绑定事件，解决了轮播图切换时点击事件传递参数和执行跳转的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

vue项目开发中，使用swiper做了三个轮播图，在每张轮播图上 @click绑定了点击事件，点击后边的图不起作用。

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" v-for="(item,index) in swiperList" :key="index" @click="goPlay(index, item.url)>
            <div class="c-poster" :style="{backgroundImage: `url(${item.picture})`}"></div>
        </li>
    </ul>
</div>

浏览器调试，打开开发者工具，可以看到虽然 swiperList只有三条数据，但是 dom中实际重复生成了6条或者9条数据，dom是copy生成的，点击事件不会生效。

解决办法：

在 swiper初始化的时候，绑定 click 时间做处理：

1. dom修改，取消@click事件，新增两个自定义属性 data-idx 和 data-url 传递参数：

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
            <div class="c-poster" :data-idx="index" :data-url="item.url" :style="{backgroundImage: `url(${item.picture})`}"></div>
        </li>
    </ul>
</div>

2. new swiper时绑定click事件，通过 target.getAttribute 获取参数

var swiper = new window.Swiper('.swiper-container', {
    loop : true,
    spaceBetween: 0,
    slidesPerView: "auto",
    autoplay: {
        delay: 3000,
        disableOnInteraction: false
    },
    on:{
      click: function(e) {   
        let url = e.target.getAttribute('data-url');
        let index = e.target.getAttribute('data-idx');
        // 2022.3.29 更新
        /* swiper 提供了几个参数，用于获取当前 索引值，不用上述自定义 data-idx
         * clickedIndex: 返回最后点击Slide的索引
         * let index = this.clickedIndex;
        */
        console.log(index, url);
        location.href = url;
      }
    }
});