It is found that there is a very strange problem with the iview carousel component. During the rotation, the @ click event written in the carousel will not be executed alternately.

<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: -sharpfff;
    .test {
      width: 50px;
      height: 50px;
      margin: 0 auto;
      background-color: red;
    }
  }
}
</style>

this is a carousel component copied from Carousel Walking Lantern iview. I added a div to one of the CarouselItem and bound the @ click event. Every time I rotated to this CarouselItem , I clicked on the click event on the div inside, and it alternately failed to click.
I hope a boss will try this phenomenon. I"m not sure if it"s my writing or the component itself


I also recreated your problem, and I found the cause. The rotation diagram of
iview, when instantiated, will generate two div, exactly the same.

clipboard.png
divdiv


loop


loop


clipboard.png
see the source code here, the author is directly copied innerHTML it is impossible to copy the events bound by the corresponding node, so this should be the bug of iview itself. It is recommended that the subject not use this iview rotation, but recommend vue-awesome-swiper .


in the way of event delegation, do not put a click event directly in it, but directly put a click event on the outer layer, e.target. If you want to get any data, set it directly on the custom attribute of the element

        <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
    }
.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b324c2-341b1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b324c2-341b1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?