Один корневой элемент

В Livewire каждый компонент должен иметь ровно один корневой элемент в своём Blade-шаблоне. Это требование необходимо для корректной работы системы обновления DOM, так как Livewire заменяет весь корневой элемент компонента при каждом обновлении. Если корневых элементов несколько, Livewire не сможет определить, какой элемент заменять, что приведёт к ошибкам.

Синтаксис

Правило применяется ко всем Blade-шаблонам компонентов Livewire и не имеет специального синтаксиса. Достаточно обернуть всё содержимое шаблона в один HTML-элемент:

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

Пример

Правильный пример компонента с одним корневым элементом:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function inc()
		{
			$this->num++;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

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

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

<div>
	<button>+</button>
	<span>1</span>
</div>

Пример

Неправильный пример компонента с несколькими корневыми элементами:

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

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

"Livewire encountered a component with multiple root elements."

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

правило один корневой элемент,
которое является обязательным для всех компонентов Livewire
метод render,
который возвращает шаблон компонента
публичные свойства public-prop,
которые доступны в шаблоне компонента
директиву wire:click,
которая вызывает метод компонента при клике