码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-15 19:02:56      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:元素   box   轮播图   loop   传参   span   key   code   swiper   

 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 的参数都为小写)

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

标签:元素   box   轮播图   loop   传参   span   key   code   swiper   

原文地址:https://www.cnblogs.com/jiawei-Wang/p/11359547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!