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

你原示例中写多个同名@click属性的写法无法实现预期效果：浏览器解析DOM时，同一个元素的重复同名属性只会保留最后一个，因此只有最后一条alert('second')会被触发。

正确实现方式 #

Alpine.js 所有指令属性内的内容都遵循原生JS表达式规则，你可以直接用分号分隔多条语句，写在同一个指令内即可：

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

适用场景扩展 #

该方法通用所有Alpine.js属性场景，比如x-init、x-bind的动态值逻辑、x-show的多条件判断前置处理等：

• 多逻辑x-init示例：

  <div x-data="{ count: 0 }" 
       x-init="count = 10; console.log('初始化计数完成', count); $dispatch('count-ready', count)">
    计数：<span x-text="count"></span>
  </div>
  

• 复杂逻辑可以套立即执行函数处理，方便编写多行逻辑：

  <button x-data="{ name: '' }"
          @click="(() => {
            const firstTip = '第一步提示'
            alert(firstTip)
            name = 'Alpine用户'
            alert(`您好，${name}`)
          })()">
    点击触发多步操作
  </button>
  

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