Удаление элемента из списка в Livewire

Заголовки постов уже можно дописывать, но убрать лишний со страницы нельзя. У каждой строки нужна своя кнопка, и метод должен понимать, какую именно строку стирать.

Для этого в цикл передают индекс элемента и отправляют его в метод аргументом. Метод удаляет элемент с этим индексом. После unset в массиве остаётся дырка в номерах, поэтому список сразу собирают заново через array_values.

Давайте соберём PostList с методами add и remove:

<?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>
				{{ $title }}
				<button type="button" wire:click="remove({{ $index }})">
					Delete
				</button>
			</li>
		@endforeach
	</ul>
	<button type="button" wire:click="add">
		Add
	</button>
</div>

Сделайте у каждого работника в списке кнопку удаления.