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

Question

想在 Alpine JS onclick 中提取值或 ID，我认为 this.id 或 this.value 可以，但没有成功。

Returns

Alpine Expression Error: Can't find variable: id

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

Answer 1

这可能对您有所帮助。

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

$event.target 将允许您访问被点击的元素。

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

Answer 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>

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

How do I get a button id or value from x-on:click in Alpine JS?

javascript

alpine.js