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

Question

I am wondering why this html / alpinejs is generating multiple console log entries when the button is clicked.

<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

According to the Alpine.js docs you are missing the defer attribute when adding the script. Adding that in will solve your problem.

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