CODEWITHSUNDEEP
javascriptnestedalpine.js
Jakub
Jakub

Reputation: 1700

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

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

This is the issue I am encountering.

This is how the layout looks like enter image description here

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!

Upvotes: 1

Views: 4676

Answers (1)

Hugo
Hugo

Reputation: 3888

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>

Upvotes: 2

Related Questions