Alpine.js - nested components
Question
I have code like this with nested components:
<html> <head> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.xx/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.
3 answers
solution1
3 ACCPTED 2020-05-17 21:15:09
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.
solution2
2 2021-06-22 01:01:43
Currently, in Alpine v2, if you nested a component inside another component, you would not be able to access the parent component easily. Now, in version 3 it's going to be a piece of cake:
<div x-data="{ firstName: 'John' }">
<div x-data="{ lastName: 'Doe' }">
<span x-text="firstName + ' ' + lastName"></span>
</div>
</div>
Nested components are going to make communicating between components super duper easy. Expect to see this awesomeness available in the next version.
solution3
0 2021-08-19 06:13:57
nesting of alpine components is simple in 3.
But what you should really learn about in v3 is that they now have global state handling via https://alpinejs.dev/magics/store
https://alpinejs.dev/globals/alpine-store
those are the main takeaways
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.