Spectre.css 的按钮在 Vue 里点击没反应是怎么回事？

FSD-欣胜提问于 2026-03-27 13:55:19 阅读 21

框架

我用 Spectre.css 写了个按钮，绑定了 click 事件，但点了一下完全没反应，控制台也没报错。是不是我哪里写错了？

试过加 .native 修饰符也不行，按钮样式是正常的，就是事件不触发。

<template>
  <button class="btn btn-primary" @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked!');
    }
  }
}
</script>

UI框架

我来解答赞 8 收藏

反馈

1 条解答

Prog.子璇 Lv1

看起来问题出在事件绑定上。按照 Vue 的规范，你在 @click 事件绑定时不需要使用 .native 修饰符，这个修饰符通常用于组件而非原生 HTML 元素。

你的代码其实已经接近正确了，不过为了确保没有其他问题，建议检查以下几点：

首先确认你的方法名和事件绑定名称一致且没有拼写错误。然后看看 Vue 实例是否正确挂载。

这里给你一个完整的例子，你可以对比一下：



<template>

  <div id="app">

    <button class="btn btn-primary" @click="handleClick">点我</button>

  </div>

</template>



<script>

export default {

  methods: {

    handleClick() {

      console.log('clicked!');

    }

  },

  mounted() {

    // 这里可以加个简单的验证，确保组件已挂载

    console.log('component mounted');

  }

}

</script>

要是还是不行，试试在 mounted 钩子里手动绑定事件，虽然这通常是最后的选择。记住，尽量让 Vue 自己处理事件绑定，这样更符合规范也更可靠。

有时候开发中遇到这种问题真的挺烦的，但保持耐心排查总能解决。希望这些能帮到你。

2026-03-27 14:00