vue中使用輪播圖插件carousel,克隆的圖片點擊事件無效的解決辦法

 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-傳參oop

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 的參數都爲小寫)spa

相關文章
相關標籤/搜索