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

问题描述：

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="swipe