如何从 x-on:click 在 Alpine JS 中获取按钮 id 或值？答案

【问题标题】：How do I get a button id or value from x-on:click in Alpine JS?如何从 x-on:click 在 Alpine JS 中获取按钮 id 或值？
【发布时间】：2026-01-09 12:35:01
【问题描述】：

希望在 Alpine JS onclick 中提取值或 id，我认为 this.id 或 this.value 会起作用，但没有运气。

Alpine 表达式错误：找不到变量：id

<button id="myBtn" value="100" x-on:click="alert(this.id);">Save</button>

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

这可能会对你有所帮助。

<button @click="alert($event.target.getAttribute('message'))" message="Hello World">Say Hi</button>

$event.target 会让你访问被点击的元素。

参考：https://alpinejs.dev/directives/on#the-event-object

【讨论】：

【解决方案2】：

使用 $event 传递事件。然后你可以像在 vanilaJs 中一样处理它。

function hello(e) {
  console.log(e.target.getAttribute('id'))
}

 <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>    
<button id="myBtn" value="100" @click="hello($event);">Save</button>

【讨论】：

这也有效，但我可以像上面一样保持它的内联。感谢您的宝贵时间。