Alpine.js 用户触发事件后DOM未更新问题求助

问题根源 #

你的代码中，x-data 内的 toggle 方法使用了箭头函数，导致 this 未绑定到 Alpine.js 的组件实例。虽然弹窗能显示变量值变化，但实际上修改的并非 Alpine 跟踪的响应式属性，因此 DOM 不会触发更新。

修正方案 #

将 toggle 的箭头函数改为普通函数，确保 this 指向当前 Alpine 组件实例：

div(class="border p-2 text-center shadow-xl h-[15vh] m-4"  x-data="{main: false,desc:true,toggle(){this.main = !this.main;this.desc=!this.desc ;alert(this.desc) }}")

原理说明 #

Alpine.js 依赖组件实例上下文跟踪响应式属性变化。箭头函数的 this 会继承外部作用域（通常是 window），而非 Alpine 组件实例，所以你修改的变量并非 Alpine 内部的响应式状态，自然无法触发 DOM 更新。改用普通函数后，this 会正确指向组件实例，修改属性时 Alpine 能检测到变化并同步更新 DOM。

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