时间戳

首页 > 解决方案 > Laravel Livewire：在更新之间保持隐藏/显示组件的状态

laravel - Laravel Livewire：在更新之间保持隐藏/显示组件的状态

问题描述

因此，我的 livewire 组件在我的站点中显示了一个左侧栏，其中包含一些搜索字段（文本、描述等）和一个显示在第一次加载时折叠的区域（我相信它使用 jquery - UI 人员做到了）：

  <p class="filterDropdown"><a class="collapsed" data-toggle="collapse" href="#collapseStatus">Status
                        <span><i class="far"></i></span>
                    </a></p>
                    <div class="collapse show " id="collapseStatus">

它包含一些复选框，并显示如下内容：

在此处输入图像描述

现在，如果我关闭它（例如，通过单击状态字符串）并在文本框中输入一些内容（例如名称 one），它当然会启动一个新请求，该请求最终会更新组件本身，但现在状态框是在其默认状态下，即打开，显示状态列表。

如何跟踪此类 UI 组件的状态？我已经搜索了 livewire 文档，但找不到太多，我想也许我跟踪了每个块并将它们与一些 livewire 的组件属性连接，但我找不到太多。

任何想法 ？

标签： laravellaravel-livewire

解决方案

所以我最终向组件添加了一个属性，如下所示：

  public $statusGroupOpen = false;

并将视图修改如下：

<p class="filterDropdown">
  <a wire:click="$toggle('statusGroupOpen')"  class="collapsed" data-toggle="collapse" href="#collapseStatus">Status
     <span><i class="far"></i></span>
  </a>
</p>
<div class="collapse @if ($statusGroupOpen) show @endif" id="collapseStatus">

它有效，缺点是每次打开/关闭块时它都会发送一个请求。

如果有人有更好的主意，我在听。目前，上述代码有效。

推荐阅读