为什么 alpinejs @click 处理程序调用我的 console.log 两次

【问题标题】：Why is alpinejs @click handler calling my console.log twice为什么 alpinejs @click 处理程序调用我的 console.log 两次
【发布时间】：2021-11-07 02:20:18
【问题描述】：

我想知道为什么这个 html / alpinejs 在单击按钮时会生成多个控制台日志条目。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ }">
  <button @click="console.log('Click!')">Click it!</button>
</div>

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

根据Alpine.js docs，您在添加脚本时缺少defer attribute。添加它可以解决您的问题。

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ }">
  <button @click="console.log('Click!')">Click it!</button>
</div>

【讨论】：