vue.js - Method not calling on click

Question

I was trying to make a slider with Vue JS
I have somehow managed to add background and bottom bullets working. But slide anchors (prev and next) function is not firing @click.
HTML of only anchors. Link to complete html

        <div class="left-anchor w-8 h-8 text-white" @click="sliderCount(-1)">
          <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </div>
        <div class="right-anchor w-8 h-8 text-white" @click="sliderCount(1)" >
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
          </svg>
        </div>

Script

export default {
data:function(){
    return{
        interval:"",
        currentSlide:0,
        images:['alexandr.jpg','pixabay.jpg','tim-mossholder.jpg'],
        image:''
    }
},
methods:{
  sliderCount:function(count){
      this.currentSlide = (this.currentSlide >= 2) ? 0 : this.currentSlide + count
  },
  setCurrentSlide:function(count) {
      this.currentSlide = count - 1
  }
},
mounted(){
},
beforeMount(){
    this.interval = ''
}
}

Why isn't this @click function working?

question from:https://stackoverflow.com/questions/65858362/method-not-calling-on-click

Answer 1

I saw your code and i found that the issue was not in Vue JS. But it was just a basic CSS issue of z-index. Just use this code in your styles tag

.anchors{
z-index: 2;
}