Метод skipRenderIf

Метод skipRenderIf класса Component позволяет условно пропустить рендеринг компонента при выполнении заданного условия. Если условие возвращает true, рендеринг не выполняется и текущее состояние компонента сохраняется. Метод принимает один параметр - условие в виде замыкания.

Синтаксис

<?php
	use Livewire\Component;
	
	class MyComponent extends Component
	{
		public function skipRenderIf()
		{
			return $this->condition;
		}
	}
?>

Пример

Давайте пропустим рендеринг компонента, если свойство $num равно нулю:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function increment()
		{
			$this->num++;
		}
		
		public function skipRenderIf()
		{
			return $this->num === 0;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<button wire:click="increment">+</button>
	<span>{{ $num }}</span>
</div>

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

<div>
	<button>+</button>
	<span>0</span>
</div>

Пример

Пропустим рендеринг, если массив $arr пуст:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class ArrayComponent extends Component
	{
		public $arr = [];
		
		public function addItem()
		{
			$this->arr[] = count($this->arr) + 1;
		}
		
		public function skipRenderIf()
		{
			return empty($this->arr);
		}
		
		public function render()
		{
			return view('livewire.array-component');
		}
	}
?>

<div>
	<button wire:click="addItem">Add</button>
	<ul>
		@foreach ($arr as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<button>Add</button>
	<ul></ul>
</div>

Пример

Пропустим рендеринг, если свойство $text содержит определенное значение:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class TextComponent extends Component
	{
		public $text = 'initial';
		
		public function updateText()
		{
			$this->text = 'updated';
		}
		
		public function skipRenderIf()
		{
			return $this->text === 'initial';
		}
		
		public function render()
		{
			return view('livewire.text-component');
		}
	}
?>

<div>
	<button wire:click="updateText">Update</button>
	<p>{{ $text }}</p>
</div>

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

<div>
	<button>Update</button>
	<p>initial</p>
</div>

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

метод skipRender,
который полностью пропускает рендеринг компонента
метод skipMount,
который пропускает инициализацию компонента
метод render,
который возвращает шаблон компонента
метод mount,
который инициализирует состояние компонента