Список вложенных компонентов в Livewire

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

В цикле @foreach можно вставлять на каждый пункт свой компонент и передавать ему данные свойством. У вложенного компонента в цикле нужен wire:key, иначе Livewire может перепутать экземпляры при изменении списка.

Давайте сделаем каталог на /catalog. Создадим Catalog и Row:

php artisan make:livewire Catalog --class
php artisan make:livewire Row --class

Давайте добавим маршрут:

<?php
	Route::get('/catalog', function () {
		return view('catalog');
	});
?>

Страница catalog.blade.php вставит компонент каталога:

<x-layout>
	<livewire:catalog />
</x-layout>

В Catalog заведём массив названий:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Catalog extends Component
	{
		public $titles = ['Rope', 'Hook', 'Chain'];
		
		public function render()
		{
			return view('livewire.catalog');
		}
	}
?>

Давайте обойдём массив и на каждый пункт вставим строку:

<div>
	<ul>
		@foreach ($titles as $title)
			<li>
				<livewire:row :title="$title" wire:key="{{ $title }}" />
			</li>
		@endforeach
	</ul>
</div>

Компонент Row примет заголовок и покажет его:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Row extends Component
	{
		public $title;
		
		public function render()
		{
			return view('livewire.row');
		}
	}
?>

Пункт выведем в шаблоне строки:

<div>
	{{ $title }}
</div>

Создайте компонент Shop с массивом названий и компонент Item. Покажите каждый пункт отдельным Item.