Laravel Livewire: сохранять статус скрытого / отображаемого компонента между обновлениями - PullRequest
Новая
       1

Laravel Livewire: сохранять статус скрытого / отображаемого компонента между обновлениями

0 голосов
/ 20 июня 2020

Итак, у меня есть компоненты livewire, показывающие левую панель на моем сайте с некоторыми полями поиска (текст, описание и т. Д. c.) И ее зону, которая показывает свернутую при первой загрузке (здесь используется jquery, я считаю - пользователь пользовательского интерфейса сделал это): 

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

Он содержит несколько флажков и показывает что-то вроде этого:

введите описание изображения здесь

Теперь если я закрою его (например, щелкнув строку состояния) и введу что-нибудь в текстовое поле (например, имя), он, конечно, запустит новый запрос, который завершится обновлением самого компонента, но теперь поле состояния находится в его статус по умолчанию, то есть открытый, с отображением списка статусов.

Как я могу отслеживать статус такого компонента пользовательского интерфейса? Я искал livewire do c, но не смог найти много, я подумал, может быть, я отслеживаю каждый из этих блоков и соединяю их с некоторым свойством компонента livewire, но я не смог найти много.

Есть идеи?

1 Ответ

0 голосов
/ 22 июня 2020

В итоге я добавил свойство к компоненту, например: 

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

Это работает, недостатком является то, что он поставляется запрос каждый раз, когда вы открываете / закрываете блок.

Если у кого-то есть идея получше, я слушаю. На данный момент приведенный выше код работает.

...