如何在Alpine JS的x-on:click事件中获取按钮的id或value值

报错原因 #

Alpine JS 的事件处理表达式默认没有绑定到触发事件的DOM元素上下文，你代码里的this并不指向当前点击的按钮，所以会出现找不到变量的报错。

解决方法 #

方法1：使用内置$event魔术变量直接读取 #

Alpine 提供了原生的$event魔术属性，对应浏览器标准事件对象，你可以通过它获取触发事件的元素属性：

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

如果按钮内部有嵌套子元素，为了避免事件冒泡导致target指向子元素，建议改用$event.currentTarget，它会永远指向绑定了点击事件的按钮本身。

方法2：封装为组件方法时传入事件对象 #

如果你的点击逻辑是写在Alpine组件的自定义方法里，可以把$event作为参数传入方法读取属性：

<div x-data="{
  handleClick(e) {
    console.log('按钮id：', e.currentTarget.id)
    console.log('按钮value：', e.currentTarget.value)
  }
}">
  <button id="myBtn" value="100" @click="handleClick($event)">Save</button>
</div>

内容的提问来源于stack exchange，提问作者user1961