CODEWITHSUNDEEP
javascriptalpine.js
Marcin Nabiałek
Marcin Nabiałek

Reputation: 111829

Alpine.js - nested components

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.

Upvotes: 7

Views: 10145

Answers (3)

Toskan
Toskan

Reputation: 14931

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

Upvotes: 2

nektobit
nektobit

Reputation: 951

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.

Upvotes: 5

Hugo
Hugo

Reputation: 3888

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.

Upvotes: 5

Related Questions