为什么Alpine.js官方示例中的部分事件绑定效果无法正常生效

问题原因 #

Alpine.js v3 规定所有使用Alpine指令（包含x-on/@click、x-show、x-text等）的元素，必须处于声明了x-data的作用域内。你无法运行的代码片段里的元素，均未关联x-data作用域，因此Alpine不会解析绑定在这些元素上的指令。
你之前可以正常运行的代码，都主动给父元素或元素自身声明了x-data，符合Alpine的解析规则，因此功能正常。

修复方案 #

有两种常用的修复方式：

• 给单个零散使用Alpine指令的元素添加空的x-data属性即可，修改后的失效代码示例：

<button x-data x-on:click="console.log('test')">Log</button>

<button x-data x-on:click="alert('Hello World!')">Say Hi</button>

<button x-data @click="$event.target.remove()">Remove Me</button>

<div x-data @foo="console.log('foo was dispatched')">
    <button @click="$dispatch('foo')">Dispatch</button>
</div>

• 如果页面有大量零散的Alpine元素，可以直接给<body>标签添加全局空x-data属性，所有子元素默认继承该作用域，无需单独添加：

<body x-data>
<!-- 页面所有内容都可以直接使用Alpine指令 -->
</body>

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