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

Question

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

我找到了这两个解决方案

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