Livewire.find()

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

Метод принимает один параметр - строку с идентификатором компонента. Если компонент с таким ID не найден, метод вернет null.

Синтаксис

Livewire.find(id)

Пример

Получим экземпляр компонента по его ID и вызовем метод:

<?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>
	<span>{{ $count }}</span>
	<button id="increment-btn">Increment</button>
</div>

@script
	<script>
		document.getElementById('increment-btn').addEventListener('click', function() {
			var componentId = {{ $this->getId() }};
			var component = Livewire.find(componentId);
			
			if (component) {
				component.increment();
			}
		});
	</script>
@endscript

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

<div>
	<span>1</span>
	<button id="increment-btn">Increment</button>
</div>

Пример

Получим значение свойства компонента через JavaScript:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class User extends Component
	{
		public $name = 'John';
		public $email = 'john@example.com';
		
		public function render()
		{
			return view('livewire.user');
		}
	}
?>

<div>
	<p>Name: {{ $name }}</p>
	<p>Email: {{ $email }}</p>
	<button id="get-data-btn">Get Data</button>
</div>

@script
	<script>
		document.getElementById('get-data-btn').addEventListener('click', function() {
			var componentId = {{ $this->getId() }};
			var component = Livewire.find(componentId);
			
			if (component) {
				console.log('Name:', component.name);
				console.log('Email:', component.email);
			}
		});
	</script>
@endscript

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

"Name: John"
"Email: john@example.com"

Пример

Обновим компонент с помощью метода refresh:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Timer extends Component
	{
		public $time = 0;
		
		public function updateTime()
		{
			$this->time = time();
		}
		
		public function render()
		{
			return view('livewire.timer');
		}
	}
?>

<div>
	<span>Current time: {{ $time }}</span>
	<button id="refresh-btn">Refresh</button>
</div>

@script
	<script>
		document.getElementById('refresh-btn').addEventListener('click', function() {
			var componentId = {{ $this->getId() }};
			var component = Livewire.find(componentId);
			
			if (component) {
				component.updateTime();
				component.refresh();
			}
		});
	</script>
@endscript

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

<div>
	<span>Current time: 1641234567</span>
	<button id="refresh-btn">Refresh</button>
</div>

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

метод $wire,
который предоставляет доступ к текущему компоненту
метод $wire.call,
который вызывает метод компонента по имени
метод $wire.set,
который устанавливает значение свойства компонента
метод $wire.refresh,
который обновляет компонент