方法不调用点击

Question

我试图用 Vue JS
制作一个滑块，我设法以某种方式添加了背景和底部项目符号。但是滑动锚点（上一个和下一个）功能没有触发@click。
HTML 只有锚。 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>

脚本

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 = ''
}
}

为什么这个@click 函数不起作用？

Answer 1

我看了你的代码，发现问题不在 Vue JS 中。但这只是 z-index 的一个基本 CSS 问题。只需在您的样式标签中使用此代码

.anchors{
z-index: 2;
}

Answer 2

@FakeAccount 是正确的，但由于您使用的是 tailwind，因此应该通过添加 z-10 class 来完成，而无需定义额外的样式规则：

 <div class="anchors z-10 ...">

方法不调用点击

Method not calling on click

vue.js

vuejs2

tailwind-css