Директива wire:show

Директива wire:show используется для условного отображения элементов на странице. Она принимает в качестве значения выражение, которое должно быть истинным для отображения элемента. При изменении свойства, участвующего в условии, Livewire автоматически обновляет видимость элемента без полной перезагрузки страницы. В отличие от директивы wire:if, которая полностью удаляет элемент из DOM, wire:show просто управляет CSS-свойством display, что делает его более производительным при частых обновлениях.

Синтаксис

<div wire:show="condition">
	Содержимое отображается, если condition = true
</div>

Пример с переключением видимости

Давайте создадим компонент, который показывает и скрывает блок по клику на кнопку:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Visibility extends Component
	{
		public $isVisible = true;

		public function toggle()
		{
			$this->isVisible = !$this->isVisible;
		}

		public function render()
		{
			return view('livewire.visibility');
		}
	}
?>

<button wire:click="toggle">
	Toggle visibility
</button>

<div wire:show="$isVisible">
	This block is visible
</div>

Результат выполнения кода:

<button>
	Toggle visibility
</button>

<div>
	This block is visible
</div>

Пример с использованием вычисляемого условия

Покажем блок только если число $num больше 5:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class CounterCondition extends Component
	{
		public $num = 0;

		public function inc()
		{
			$this->num++;
		}

		public function render()
		{
			return view('livewire.counter-condition');
		}
	}
?>

<button wire:click="inc">
	Increment
</button>
<span>{{ $num }}</span>

<div wire:show="$num > 5">
	Number is greater than 5
</div>

Результат выполнения кода при $num = 7:

<button>
	Increment
</button>
<span>7</span>

<div>
	Number is greater than 5
</div>

Пример с использованием метода в условии

Используем метод компонента для определения видимости:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class UserStatus extends Component
	{
		public $isAdmin = false;

		public function toggleAdmin()
		{
			$this->isAdmin = !$this->isAdmin;
		}

		public function isUserAdmin()
		{
			return $this->isAdmin === true;
		}

		public function render()
		{
			return view('livewire.user-status');
		}
	}
?>

<button wire:click="toggleAdmin">
	Toggle admin status
</button>

<div wire:show="isUserAdmin()">
	Admin panel
</div>

Результат выполнения кода при $isAdmin = true:

<button>
	Toggle admin status
</button>

<div>
	Admin panel
</div>

Смотрите также

директиву wire:click,
которая обрабатывает клик по элементу
директиву wire:model,
которая создает двустороннюю привязку данных
директиву wire:loading,
которая показывает элементы во время выполнения запросов
директиву wire:dirty,
которая реагирует на изменения полей ввода