Событие $toggle
Событие $toggle в JavaScript-секции Livewire предназначено
для переключения булевых значений свойств компонента.
Оно вызывается через объект $wire и принимает имя свойства,
значение которого нужно инвертировать.
После выполнения события Livewire автоматически обновляет
шаблон компонента, отражая новое состояние.
Синтаксис
$wire.toggle('propertyName')
Где propertyName - имя публичного свойства компонента,
имеющего булев тип или способного быть приведённым к булю.
Пример
Давайте создадим компонент с булевым свойством $show,
которое управляет видимостью блока.
По клику на кнопку будем переключать это свойство
с помощью $toggle:
<?php
namespace AppLivewire;
use LivewireComponent;
class ToggleDemo extends Component
{
public $show = false;
public function render()
{
return view('livewire.toggle-demo');
}
}
?>
<div>
<button wire:click="$toggle('show')">
Toggle
</button>
<div @if(!$show) style="display: none;" @endif>
This block is visible
</div>
</div>
Результат выполнения кода после нескольких кликов:
<button>
Toggle
</button>
<div style="display: none;">
This block is visible
</div>
Пример
Используем $toggle внутри метода при клике на кнопку.
Создадим свойство $active, которое будет менять
класс элемента:
<?php
namespace AppLivewire;
use LivewireComponent;
class ActiveToggle extends Component
{
public $active = false;
public function render()
{
return view('livewire.active-toggle');
}
}
?>
<div>
<button wire:click="$toggle('active')">
Switch
</button>
<div class="{{ $active ? 'active' : 'inactive' }}">
Status: {{ $active ? 'ON' : 'OFF' }}
</div>
</div>
Результат выполнения кода после клика:
<button>
Switch
</button>
<div class="active">
Status: ON
</div>
Пример
Вызовем $toggle из JavaScript-обработчика
события @click на элементе.
Используем свойство $expanded для управления
раскрытием контента:
<?php
namespace AppLivewire;
use LivewireComponent;
class Expandable extends Component
{
public $expanded = false;
public function render()
{
return view('livewire.expandable');
}
}
?>
<div>
<div @click="$wire.toggle('expanded')" style="cursor: pointer;">
<strong>Click to expand</strong>
</div>
<div @if($expanded) style="display: block;" @else style="display: none;" @endif>
<p>Hidden content that appears after toggle.</p>
</div>
</div>
Результат выполнения кода:
<div>
<div style="cursor: pointer;">
<strong>Click to expand</strong>
</div>
<div style="display: block;">
<p>Hidden content that appears after toggle.</p>
</div>
</div>
