Ключ элемента списка в Livewire

Удаление заголовка из конца списка выглядит правильно. Удаление из середины уже нет: фреймворк сличает старую и новую разметку по порядку строк. Кнопка удаления может остаться у соседнего текста, хотя с сервера пришёл уже другой список.

Атрибут wire:key даёт строке постоянное имя. Пункт узнают по этому имени, а не по месту в списке, и при удалении забирают именно его. Имя должно быть уникальным. Заголовки постов не повторяются, поэтому ключом подойдёт сам текст $title.

Давайте соберём полный PostList и добавим wire:key на каждый li:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostList extends Component
	{
		public $titles = ['News', 'Photo'];
		
		public function add()
		{
			$this->titles[] = 'post ' . (count($this->titles) + 1);
		}
		
		public function remove($index)
		{
			unset($this->titles[$index]);
			$this->titles = array_values($this->titles);
		}
		
		public function render()
		{
			return view('livewire.post-list');
		}
	}
?>

Давайте зададим ключ у пункта списка в шаблоне:

<div>
	<ul>
		@foreach ($titles as $index => $title)
			<li wire:key="{{ $title }}">
				{{ $title }}
				<button type="button" wire:click="remove({{ $index }})">
					Delete
				</button>
			</li>
		@endforeach
	</ul>
	<button type="button" wire:click="add">
		Add
	</button>
</div>

Удалите работника из середины списка так, чтобы имя и кнопка остались у своего человека.