iview中轮播图组件在loop自动播放时，添加的点击事件有时不触发

问题描述：使用iview中的Carousel组件并开启循环属性loop时，点击每个轮播图片时进行对应事件处理；但是轮播循环一周后，点击轮播图片时点击事件并没有触发；

问题产生原因：

        因为开启loop循环属性后，生成的HTML代码里有两个一模一样的div节点，但是点击事件只绑定在了第一个div里的子节点上；第二个div中的子节点没有该点击事件；所以导致循环播放第二个div中的内容时，是触发不了我们绑定的点击事件；

第一个div中子节点的点击事件：该事件就是我们手动添加的事件；

 第二个div中的子节点没有我们手动添加的事件；

刚开始时点击事件添加在每个轮播块CarouselItem上；代码如下：

<Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false" 
:autoplay-speed="2500" arrow="always">
   <CarouselItem v-for="(item, index) in bannerItem.data" :key="index" 
       @click.native="pushRouter(item.pathType, item.path)">
      <img :src="item.pic" alt="">
    </CarouselItem>
 </Carousel>

解决方案：

       方案1： 去掉loop循环属性；

       方案2：点击事件添加到父节点上，通过事件委托的方式进行子节点事件的处理，代码如下：

        在Carousel外层添加一个div标签，将点击事件绑在该标签上； （注意：如果直接将点击事件绑在Carousel标签上，还是会有问题；）然后在img标签上通过data-*的方式嵌入自定义数据，用于标识当前点击的子节点；

data-*的用法可参考链接：HTML data-* 属性

<div @click="pushRouter($event)">
  <Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false" 
      :autoplay-speed="2500" arrow="always" :ref="bannerItem.id" >
      <CarouselItem v-for="(item, index) in bannerItem.data" :key="index">
          <img :src="item.pic" alt="" :data-id="item.id" :data-path="item.path" 
            :data-path-type="item.pathType">
      </CarouselItem>
   </Carousel>
</div>

<script>
 private pushRouter (e) {
    const { path, pathType: type, id} = e.target.dataset 
    if(e.target.type === 'button' || !id) return
    if (+type === 0) {
      return false
    } else {
      this.handleLink(+type, path)
    }
  }
</script>