问题描述:
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