174
rated 0 times
[
177]
[
3]
/ answers: 1 / hits: 8553
/ 4 Years ago, sun, may 17, 2020, 12:00:00
I have code like this with nested components:
<html>
<head>
<script src=https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/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.
More From » alpine.js
