vue中使用轮播图插件carousel，克隆的图片点击事件无效的解决办法

Posted 2022-07-15 jiawei-wang

 1 <div class="students-box" @click="clickSwiper">
 2 // 将点击事件绑定在父元素上
 3             <carousel
 4               :items="5"
 5               :autoplay="true"
 6               :nav="true"
 7               :margin="20"
 8               :loop="true"
 9               :autoplayTimeout="3000"
10               :autoplayHoverPause="true"
11             >
12               <div v-for="(item, index) in members" :key="index" class="list-item">
13                 <div>
14                   <img :src="item.image" class="list-img" :data-itemId="item.id" />15                 </div>
16                 <div class="list-title" :data-itemId="item.id">item.title</div>
17               </div>
18             </carousel>
19           </div>

往需要绑定点击事件的元素上通过 :data-传参

1 clickSwiper(e) 
2       console.log(e);
3       if (e.target.dataset.itemid) 
4         let id = parseInt(e.target.dataset.itemid);
5         // 取到参数
6       
7     

通过 e.target.dataset 取到参数（注意 e.target.dataset 的参数都为小写）