Example of my code:
#Alpine.js issue
high pollen
<div x-data="{ open: false }" x-on:click.outside="open = false">
<button x-on:click="open = !open">
My Account
</button>
<ul x-show="open">
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
<!-- This button is now in the same blade as the x-data, but I want this button to go in a different blade and still have it be able to toggle -->
<button x-on:click="open = !open">
My Account
</button>
bright quest
You can place the button in a different blade file sure, but you still need it nested on x-data as that is how Alpine works AFAIK.
high pollen
I'm relatively new to apline.js, would you know how I would be able to implement this? Would I have to write javascript lines from scratch or
bright quest
Well for starters, why do you want the button to be in a different blade file? Do you just want it to be reuseable in other places where you got x-data with open toggle?
high pollen
Well for starters, why do you want the button to be in a different blade file? D...
Well I wanted to actually put the button in the same blade file but that wouldn't be responsive so what I did was create a include file and separate it from each other.
The only negative aspect of this practice is that it requires alpine.js to toggle from two different blades
bright quest
Well you can't take the button out of the parent div that holds x-data as far as I am aware as the state of alpine depends on the children from x-data
high pollen
Oh
bright quest
Properties defined in an x-data directive are available to all element children. Even ones inside other, nested x-data components.
But to be honest, I have used Alpine.js very little. There is most likely some solution to make 2 components/x-data communicate somehow. Ultimately, a simple open/close toggle is fairly easy to do with plain JS