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

Vue-cli javascript vue.js iview

Mar.30,2021

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

divdiv

loop

loop

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
    }

Previous: Could you tell me how to set the versatility of scaffolding?

Next: Can table, using layui use its own data instead of requesting data from url?