为什么 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 docs you are missing the 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>

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

Why is alpinejs @click handler calling my console.log twice

javascript

alpine.js