Livewire.all()

Метод Livewire.all доступен в глобальном объекте Livewire и возвращает массив всех экземпляров компонентов Livewire, присутствующих на странице. Каждый элемент массива представляет собой объект компонента со всеми его свойствами и методами. Этот метод полезен для получения доступа к нескольким компонентам одновременно без необходимости знать их имена или идентификаторы.

Синтаксис

Livewire.all()

Метод не принимает аргументов и возвращает массив объектов.

Пример

Давайте создадим два компонента Livewire на странице и получим их с помощью метода Livewire.all:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ComponentA extends Component
	{
		public $num = 5;
		
		public function render()
		{
			return view('livewire.component-a');
		}
	}
?>

<div>
	<p>Component A: {{ $num }}</p>
</div>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ComponentB extends Component
	{
		public $text = 'abcde';
		
		public function render()
		{
			return view('livewire.component-b');
		}
	}
?>

<div>
	<p>Component B: {{ $text }}</p>
</div>

Теперь на странице, где подключены оба компонента, получим их с помощью JavaScript:

const components = Livewire.all()
console.log(components)

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

[Component, Component]

Пример

Давайте получим все компоненты и выведем их имена с помощью метода getName:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserList extends Component
	{
		public $users = ['John', 'Jane', 'Bob'];
		
		public function render()
		{
			return view('livewire.user-list');
		}
	}
?>

<div>
	@foreach ($users as $user)
		<p>{{ $user }}</p>
	@endforeach
</div>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ArticleList extends Component
	{
		public $articles = ['Article 1', 'Article 2', 'Article 3'];
		
		public function render()
		{
			return view('livewire.article-list');
		}
	}
?>

<div>
	@foreach ($articles as $article)
		<p>{{ $article }}</p>
	@endforeach
</div>

JavaScript-код для получения имён всех компонентов:

const allComponents = Livewire.all()
const names = allComponents.map(comp => comp.getName())
console.log(names)

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

['user-list', 'article-list']

Пример

Давайте изменим значение свойства $num у всех компонентов на странице с помощью метода set:

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

<div>
	<p>Counter: {{ $num }}</p>
	<button wire:click="$refresh">Refresh</button>
</div>

JavaScript-код для установки значения 10 всем компонентам:

const components = Livewire.all()
components.forEach(comp => comp.set('num', 10))

После выполнения этого кода все компоненты Counter на странице обновят свои значения на 10.

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

метод Livewire.find,
который находит конкретный компонент по его идентификатору
метод Livewire.first,
который возвращает первый компонент на странице
метод wire.set,
который устанавливает значение свойства компонента
метод wire.call,
который вызывает метод компонента из JavaScript