如何使用 alpine js 使 x-data 和 x-show 在嵌套 div 内工作

Question

我JavaScript经验很少，没有vue或react经验，所以理解这些答案被证明是徒劳的。 >.<

我找到了这 2 个解决方案

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

这就是我遇到的问题。

我得到了用于折叠边栏按钮的 x-data 和 x-show。
当我在包含内容的子 div 中添加另一个 x-data 元素时，它似乎破坏了一切，但没有任何效果。
侧边栏 div 和内容 div 都在控制折叠按钮的父级 div 中。

布局是这样的

这是布局的代码

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

非常感谢任何帮助！提前致谢！

Answer 1

我在您的代码中看到的最初问题是 kanbanToggle: 1 无效 JavaScript，正确的语法是 kanbanToggle = 1.

所以替换：

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

与

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

如何使用 alpine js 使 x-data 和 x-show 在嵌套 div 内工作

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

javascript

nested

alpine.js