How to make x-data and x-show work inside nested div using alpine js

Question

I have very little JavaScript experience and no vue or react experience, so understanding these answers is proving to be futile. >.<

I found these 2 solutions

• Alpine nested x-data
• https://github.com/alpinejs/alpine/issues/49

This is the issue I am encountering.

• I got the x-data and x-show to work for the collapse sidebar button.
• When I added another x-data element in a child div that houses the content, it seems to break everything and nothing works.
• Both the sidebar div, and content div are inside the parent div that controls the collapse button.

This is how the layout looks like

This is the code of how it is somewhat layed out

// Div that houses main content and sidebar
<div x-data="{sidebarActive: true}"> 

    // Sidebar button
    <div @click="sidebarActive =!sidebarActive"> collapse icon </div>
    
    // kanban content
    <div x-data ="{kanbanToggle: 2}">
 
        // toggle buttons
        <div>
            <div @click="kanbanToggle: 1"> button 1 </div>
            <div @click="kanbanToggle: 2"> button 2 </div>
            <div @click="kanbanToggle: 3"> button 3 </div>
        </div>
        
        // kanban board content
        <div>
            <div x-show ="kanbanToggle ===1"> timeline view </div>
            <div x-show ="kanbanToggle ===2"> card view </div>
            <div x-show ="kanbanToggle ===3"> list view </div>
        </div>    
    </div>

    <div x-show="{sidebarActive:true}"> sidebar content </div>

</div>

Any help much appreciated! Thanks in advance!

Answer 1

The initial issue I can see with your code is that kanbanToggle: 1 is not valid JavaScript, the correct synax is kanbanToggle = 1.

So replace:

<div @click="kanbanToggle: 1"> button 1 </div>
<div @click="kanbanToggle: 2"> button 2 </div>
<div @click="kanbanToggle: 3"> button 3 </div>

with

<div @click="kanbanToggle = 1"> button 1 </div>
<div @click="kanbanToggle = 2"> button 2 </div>
<div @click="kanbanToggle = 3"> button 3 </div>