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

时间:2020-06-20 15:18:21

标签: 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">

它包含一些复选框,并显示如下内容:

enter image description here

现在,如果我关闭它(例如,单击“状态”字符串)并在文本框中键入某些内容(例如,名称“ one”),则它当然会启动一个新请求,该请求最终会更新组件本身,但是现在“状态”框处于默认状态,即处于打开状态,显示状态列表。

如何跟踪此类UI组件的状态? 我已经搜索了livewire文档,但是找不到很多,我想也许我跟踪了每个块并将它们与livewire的component属性连接起来,但是找不到很多。

有什么主意吗?

1 个答案:

答案 0 :(得分:0)

所以我最终像这样向组件添加了一个属性:

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

它有效,缺点是每次您打开/关闭块时都会发出请求。

如果有人有更好的主意,我在听。暂时,以上代码有效。