Livewire.first()

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

Синтаксис

Livewire.first()

Метод не принимает никаких параметров и возвращает объект компонента или undefined, если компонент не найден.

Пример

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

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

<div>
	<h3>Counter: {{ $count }}</h3>
	<button wire:click="increment">+</button>
</div>

В JavaScript мы можем получить этот компонент и вызвать его метод:

const component = Livewire.first();

if (component) {
	component.increment();
}

После вызова метода increment счетчик увеличится на единицу, и состояние компонента автоматически обновится.

Пример

Теперь добавим кнопку, которая при клике через JavaScript будет изменять свойство компонента:

<div>
	<h3>Counter: {{ $count }}</h3>
	<button wire:click="increment">+</button>
	<button onclick="resetCounter()">Reset</button>
</div>

function resetCounter() {
	const component = Livewire.first();
	
	if (component) {
		component.set('count', 0);
	}
}

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

<div>
	<h3>Counter: 0</h3>
	<button>+</button>
	<button onclick="resetCounter()">Reset</button>
</div>

При нажатии на кнопку "Reset" свойство count будет установлено в 0 через метод set, полученный от компонента.

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

метод Livewire.all,
который возвращает массив всех компонентов на странице
метод Livewire.find,
который находит компонент по его ключу
метод $wire,
который дает доступ к компоненту из JavaScript
метод Livewire.on,
который позволяет слушать события Livewire в JavaScript