方法没有在点击时调用答案

【问题标题】：Method not calling on click方法没有在点击时调用
【发布时间】：2021-04-27 16:47:34
【问题描述】：

我试图用 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 函数不起作用？

【问题讨论】：

您是否在方法中记录了一些内容以检查它是否被调用？
是的！试过了。如果在mounted 中调用函数sliderCount(1) 正在记录。但是，当我单击锚点时，它不会记录。锚点 === "上一个和下一个按钮"
试试修饰符stop, selft 比如@click.stop
试过了。甚至重新启动了 npm run serve。还是不行。
能否在play.tailwindcss.com重现问题，以便调试，通过CDN添加vue并使用在线图片

标签： vue.js vuejs2 tailwind-css

【解决方案1】：

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

.anchors{
z-index: 2;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：