I have code like this with nested components:
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{isOpen: false}">
<div x-data="{isOtherOpen: false}">
<a href="#" @click="isOpen = !isOpen">Toogle element</a>
<div x-show="isOpen">
Now element is opened
</div>
<a href="#" @click="isOtherOpen = !isOtherOpen">Toogle other element</a>
<div x-show="isOtherOpen">
Now other element is opened
</div>
</div>
</div>
</body>
</html>but it seems it does not work. Is there any why to make it work using nested components or maybe Alpine.js cannot handle this yet? OF course I’m aware that changing:
<div x-data="{isOpen: false}">
<div x-data="{isOtherOpen: false}">
into
<div x-data="{isOpen: false, isOtherOpen: false}">
<div>
would solve the issue, but this way I would have single component.
Advertisement
Answer
Alpine.js doesn’t support nesting as of v2.x latest.
If you don’t want to combine everything into a single component, you can have 2 components side by side and you can setup communication between them with $dispatch to send custom events and x-on:custom-event.window to listen to the event.