Level 102
Can you recreate it here? https://jsfiddle.net/dy2ork0f/
My example does not show it twice for me.
1 like
Sep 27, 2022
11
Level 2
Alpinejs click handler runs twice
app.blade.php
<head>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
post.blade.php
<div x-data="{ }">
<button @click="console.log('Click!')">Click it!</button>
</div>
Why is this code running twice when I click ONCE ?
Level 2
@Sinnbeck Kindly check this screenshot https://www.dropbox.com/s/k1oj7mpklrpdbae/Screenshot%20from%202022-09-27%2015-36-56.png?dl=0
Level 102
@FireBlade Yes. How can we recreate it? :) Or is the page live somewhere so we can inspect the dom?
Level 2
@Sinnbeck App is still under development. Let me see how I can reproduce it ...
Level 102
Ah I was able to recreate it. Just load alpine twice. So it seems you are loading it twice somehow. Either via 2 scripts (in different places) or perhaps also in your compiled app.js ?
Loaded once by jsfiddle, and I also load it on the page: https://jsfiddle.net/vj1rfugs/
2 likes
Level 2
@Sinnbeck Ok. I also think so. Let me see how I managed to include it twice...
Level 2
@Sinnbeck I have deleted this line in the head section of app.blade.php and it looks good now :
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
Alipine looks to be auto include under resources/js/app.js. Thanks a lot
Level 102
@FireBlade Happy to help
Level 122
perhaps you have more than one clickable element?
1 like
Level 2
@Snapey No. There's only one button and one such function.
Level 1
I was also having the same issue, my functions were calling a twice, there was a silly problem. I searched for the alpine package import in my laravel project i found that my one of the laravel package had already imported the alpine library and i had imported it in my html's head when i removed one of the imports it was working fine
Please or to participate in this conversation.