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

Question

我想知道为什么这个 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>

Answer 1

根据Alpine.js 文档，您在添加脚本时缺少该defer属性。添加该内容将解决您的问题。

<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>