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

user_731624 0
Viewed 1301

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>

alpine.js javascript
1 Answers

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>

user_13093770
Related