Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  177] [ 3]  / answers: 1 / hits: 8542  / 4 Years ago, sun, may 17, 2020, 12:00:00

I have code like this with nested components:


<script src=[email protected]/dist/alpine.min.js defer></script>


<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


<a href=# @click=isOtherOpen = !isOtherOpen>Toogle other element</a>

<div x-show=isOtherOpen>
Now other element is opened




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}>


<div x-data={isOpen: false, isOtherOpen: false}>

would solve the issue, but this way I would have single component.

More From » alpine.js


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.

[#3787] Thursday, May 14, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 262
Total Questions: 82
Total Answers: 97

Location: Libya
Member since Mon, Dec 7, 2020
3 Years ago
alorac questions
Sat, Oct 10, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Wed, Jul 1, 20, 00:00, 4 Years ago
Wed, Jun 3, 20, 00:00, 4 Years ago
Wed, Mar 4, 20, 00:00, 4 Years ago