发现iview 轮播组件一个很奇怪的问题，在轮播的时候，会交替出现 写在轮播中的@click事件无法执行

Question

<template>
    <div class="boxdiv">
      <Carousel v-model="value1" loop>
        <CarouselItem class="car">
            <div class="demo-carousel">
              <div class="test" @click="abc">1</div>
            </div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">2</div>
        </CarouselItem>
    </Carousel>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value1: 0
            }
        },
        methods:{
          abc(){
            console.log(11111);
          }
        }
    }
</script>
<style lang="less">
.boxdiv {
  height: 600px;
  .demo-carousel {
    width: 100%;
    height: 500px;
    background-color: #fff;
    .test {
      width: 50px;
      height: 50px;
      margin: 0 auto;
      background-color: red;
    }
  }
}
</style>

这是复制自Carousel 走马灯 iview的轮播组件，我在其中一个CarouselItem 中添加了一个div 并且绑定了@click事件，每次轮播到这个CarouselItem 的时候，点击里面的div上的click事件，会出现交替无法点击的情况
希望有大佬试试这个现象，我不确定是我写法上的问题，还是组件自身的问题

Answer 1

我也重现了你的问题，我找到原因了。
iview的这个轮播图，实例化的时候，会生成两个div，且一模一样的。

然鹅，你绑定的点击事件只在第一个div里面的某个节点上，而在另外一个div的那个节点上并没有绑定，所以说又一次点击是生效的，另外一次就不会生效

---

我试了下，你把loop属性去掉就可以了，你试试看。

<Carousel v-model="value1" loop @on-change="change"></Carousel>

这里这个loop去掉

---

看到源码这里，作者是直接复制的innerHTML这样做是复制不了对应节点绑定的事件的，所以这个应该是iview自身的bug。建议题主不要用iview的这个轮播图了，推荐用vue-awesome-swiper。

Answer 2

用事件委托的方式, 不要直接在里面放点击事件, 直接放个点击事件在外层, e.target, 想要获取什么数据, 就直接设置在该元素的自定义属性上

        <Carousel loop autoplay @click.native="toBannerUrl">
          <CarouselItem  v-for="(item,index) in banners"  :key="index" >
            <img :src="item" alt="" >
          </CarouselItem>
        </Carousel>

    toBannerUrl (e) {
      console.dir(e.target)
      let src = e.target.src
    }