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

Директива wire:key используется для назначения уникального ключа элементу в циклах. Это помогает Livewire отслеживать изменения в списках и эффективно перерисовывать только те элементы, которые действительно изменились. В значение передаётся выражение, возвращающее уникальный идентификатор элемента.

Синтаксис

@foreach ($arr as $item)
	<div wire:key="{{ $item['id'] }}">
		{{ $item['name'] }}
	</div>
@endforeach

Пример

Давайте выведем список элементов с использованием wire:key:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ListComponent extends Component
	{
		public $items = [
			['id' => 1, 'name' => 'First'],
			['id' => 2, 'name' => 'Second'],
			['id' => 3, 'name' => 'Third'],
		];
		
		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<ul>
	@foreach ($items as $item)
		<li wire:key="{{ $item['id'] }}">
			{{ $item['name'] }}
		</li>
	@endforeach
</ul>

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

<ul>
	<li>First</li>
	<li>Second</li>
	<li>Third</li>
</ul>

Пример

Давайте используем индексацию через $loop->index в качестве ключа:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class IndexComponent extends Component
	{
		public $letters = ['a', 'b', 'c', 'd', 'e'];
		
		public function render()
		{
			return view('livewire.index-component');
		}
	}
?>

<ul>
	@foreach ($letters as $letter)
		<li wire:key="{{ $loop->index }}">
			{{ $letter }}
		</li>
	@endforeach
</ul>

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

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ul>

Пример

Давайте динамически добавим элемент в список и посмотрим на ключи:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DynamicComponent extends Component
	{
		public $items = [
			['id' => 1, 'name' => 'First'],
			['id' => 2, 'name' => 'Second'],
		];
		
		public function addItem()
		{
			$newId = count($this->items) + 1;
			$this->items[] = ['id' => $newId, 'name' => 'Item ' . $newId];
		}
		
		public function render()
		{
			return view('livewire.dynamic-component');
		}
	}
?>

<ul>
	@foreach ($items as $item)
		<li wire:key="{{ $item['id'] }}">
			{{ $item['name'] }}
		</li>
	@endforeach
</ul>
<button wire:click="addItem">Add item</button>

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

<ul>
	<li>First</li>
	<li>Second</li>
	<li>Item 3</li>
</ul>
<button>Add item</button>

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

директиву wire:click,
которая обрабатывает клики по элементам
директиву wire:model,
которая привязывает поле ввода к свойству компонента
директиву wire:ignore,
которая исключает элемент из процесса обновления
метод render,
который возвращает шаблон компонента