$wire.$el

Свойство $wire.$el предоставляет доступ к корневому DOM-элементу компонента Livewire из JavaScript-кода. Это свойство доступно в любом месте JavaScript-кода, где есть доступ к объекту $wire. Оно возвращает ссылку на HTML-элемент, который является корневым для текущего компонента Livewire.

Синтаксис

$wire.$el

Пример

Давайте создадим компонент Livewire с кнопкой, при клике на которую будем получать доступ к корневому элементу через $wire.$el и выводить его в консоль:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Example extends Component
	{
		public function render()
		{
			return view('livewire.example');
		}
	}
?>

<div wire:id="{{ $this->getId() }}">
	<button wire:click="logElement">
		Log element
	</button>
</div>

@push('scripts')
	<script>
		document.addEventListener('livewire:initialized', () => {
			Livewire.on('log-element', (event) => {
				console.log(event.component.el);
			});
		});
	</script>
@endpush

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Example extends Component
	{
		public function logElement()
		{
			$this->dispatch('log-element');
		}
		
		public function render()
		{
			return view('livewire.example');
		}
	}
?>

Пример

Давайте используем $wire.$el для изменения стиля корневого элемента компонента при клике на кнопку:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class StyleChanger extends Component
	{
		public function changeStyle()
		{
			$this->dispatch('change-style');
		}
		
		public function render()
		{
			return view('livewire.style-changer');
		}
	}
?>

<div>
	<button wire:click="changeStyle">
		Change background
	</button>
</div>

@push('scripts')
	<script>
		document.addEventListener('livewire:initialized', () => {
			Livewire.on('change-style', (event) => {
				event.component.el.style.backgroundColor = 'lightblue';
			});
		});
	</script>
@endpush

Пример

Давайте получим текст внутри корневого элемента компонента с помощью свойства $wire.$el:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TextGetter extends Component
	{
		public $text = 'Hello world';
		
		public function getText()
		{
			$this->dispatch('get-text');
		}
		
		public function render()
		{
			return view('livewire.text-getter');
		}
	}
?>

<div>
	<span>{{ $text }}</span>
	<button wire:click="getText">
		Get text
	</button>
</div>

@push('scripts')
	<script>
		document.addEventListener('livewire:initialized', () => {
			Livewire.on('get-text', (event) => {
				const text = event.component.el.querySelector('span').textContent;
				alert('Text: ' + text);
			});
		});
	</script>
@endpush

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

<div>
	<span>Hello world</span>
	<button>
		Get text
	</button>
</div>

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

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