Alpine JS - 创建具有活动状态的菜单

Question

我正在尝试使用 Alpine JS 创建侧边栏菜单

我什至不确定这是否可以用 Alpine JS 来实现。

@foreach($kanbans as $kanban)
  <div x-data="activeKanban : ????">
    <div @click="activeKanban = {{$kanban->id}}">

       <div x-show="activeKanban !== {{$kanban->id}}">
        // Design for collapsed kanban
       </div>

    <div>

    <div x-show="activeKanban === {{$kanban->id}}">
        // Design for active kanban
    </div>

  </div>
@endforeach

当我切换页面时，$kanban->id 发生了变化，我想知道不是手动设置 activeKanban : 1 是否有办法将此信息传递给 AlpineJS？

所以默认情况下，如果我加载其他页面，打开的默认菜单将基于 ID，而不是全部折叠或仅打开指定的 1 个？

Answer 1

如果您的目标是手风琴式菜单，您可以根据您共享的代码使用 AlpineJs 实现它：

// Set x-data on a div outside the loop and add your active kanban as a property
<div x-data="{
    activeKanban: {{ $activeKanbanId ?? null }}
}">
    @foreach($kanbans as $kanban)
        <div @click="activeKanban = {{ $kanban->id }}">
            <div x-show="activeKanban !== {{ $kanban->id }}">
                // Collapsed view
            </div>

            <div x-show="activeKanban === {{ $kanban->id }}">
                // Expanded view
            </div>
        </div>
    @endforeach
</div>

这里每个看板菜单项都可以访问 AlpineJs 组件实例中的 activeKanban 属性并可以对其进行响应式设置。

即如果 activeKanban 设置为新 ID，则当前打开的项目将关闭，新的将打开

增加灵活性

如果你想单独打开和关闭它们怎么办？有不止一种方法可以实现这一点，但在这种情况下，我们可以修改上面的代码以允许它：

// Here we add an array of openItems and two helper functions:
// isOpen() - to check if the id is either the activeKanban or in the openItems array
// toggle() - to add/remove the item from the openItems array
<div x-data="{
    activeKanban: {{ $activeKanbanId ?? null }},
    openItems: [],

    isOpen(id){
        return this.activeKanban == id || openItems.includes(id)
    },
    toggle(id){
        if(this.openItems.includes(id)){
            this.openItems = this.openItems.filter(item => {
                return item !== id
            });
        }else{
            this.openItems.push(id)
        }
    }
}">
    @foreach($kanbans as $kanban)
        <div @click="toggle({{ $kanban->id }})">
            <div x-show="!isOpen({{$kanban->id}})">
                // Collapsed view
            </div>

            <div x-show="isOpen({{$kanban->id}})">
                // Expanded view
            </div>
        </div>
    @endforeach
</div>

这允许我们设置一个活动项，也可以选择 open/close 其他菜单项。

Alpine JS - 创建具有活动状态的菜单

Alpine JS - Creating a menu with active states

laravel

laravel-livewire

alpine.js

增加灵活性