如何在单个 Alpine.js 属性中执行多个语句？

Question

我想在单个 Alpine.js 事件处理程序中执行多个语句（但是，我相信它可以推广到任何属性）。

我想要实现的一个例子：

<button x-data 
        @click="alert('first')" 
        @click="alert('second')">
  Click me
</button>

Answer 1

如果用分号:

分隔语句是可能的

<button x-data 
        @click="alert('first'); alert('second')">
  Click me
</button>

Answer 2

您可以提取组件逻辑并为单击事件添加句柄。

<div x-data="myComponent">
  <button x-on:click.prevent="handleClick">Click me</button>
</div>

<script>
  const myComponent = () => {
  return {
    handleClick() {
      console.log('First event')
      console.log('Second event')
    }
  }
}
</script>

如何在单个 Alpine.js 属性中执行多个语句？

How to execute multiple statements within a single Alpine.js attribute?

javascript

alpine.js