Свойство $el

Свойство $el доступно в JavaScript-контексте Livewire компонента. Оно содержит ссылку на корневой DOM-элемент компонента. Это свойство позволяет выполнять прямые манипуляции с DOM, добавлять обработчики событий или изменять стили. Доступ к $el осуществляется внутри методов компонента через объект this.

Синтаксис

this.$el

Свойство возвращает объект типа HTMLElement, соответствующий корневому элементу компонента.

Пример

Давайте изменим стиль корневого элемента компонента при нажатии на кнопку:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class StyleChanger extends Component
	{
		public function changeStyle()
		{
			// Метод вызывается через JS
		}
		
		public function render()
		{
			return view('livewire.style-changer');
		}
	}
?>

<div>
	<button onclick="changeBackground()">
		Change background
	</button>
	<p>Current color: default</p>
</div>

@script
	<script>
		function changeBackground() {
			$wire.changeStyle();
			
			// Получаем корневой элемент компонента
			const el = $wire.$el;
			el.style.backgroundColor = '#f0f0f0';
			el.style.padding = '20px';
			el.style.borderRadius = '8px';
		}
	</script>
@endscript

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

<div style="background-color: #f0f0f0; padding: 20px; border-radius: 8px;">
	<button onclick="changeBackground()">
		Change background
	</button>
	<p>Current color: default</p>
</div>

Пример

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

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

<div>
	<p id="message">Hello, Livewire!</p>
	<button onclick="changeText()">
		Change text
	</button>
</div>

@script
	<script>
		function changeText() {
			// Находим элемент по ID внутри компонента
			const messageEl = $wire.$el.querySelector('#message');
			messageEl.textContent = 'Text changed!';
			messageEl.style.color = 'green';
			messageEl.style.fontWeight = 'bold';
		}
	</script>
@endscript

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

<div>
	<p id="message" style="color: green; font-weight: bold;">Text changed!</p>
	<button onclick="changeText()">
		Change text
	</button>
</div>

Пример

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

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

<div style="width: 300px; height: 200px; border: 1px solid #ccc;">
	<p>Element size:</p>
	<button onclick="showSize()">
		Show size
	</button>
	<p id="size-info"></p>
</div>

@script
	<script>
		function showSize() {
			const el = $wire.$el;
			const width = el.offsetWidth;
			const height = el.offsetHeight;
			
			document.getElementById('size-info').textContent = 
				`Width: ${width}px, Height: ${height}px`;
		}
	</script>
@endscript

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

<div style="width: 300px; height: 200px; border: 1px solid #ccc;">
	<p>Element size:</p>
	<button onclick="showSize()">
		Show size
	</button>
	<p id="size-info">Width: 300px, Height: 200px</p>
</div>

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

свойство $el,
которое предоставляет доступ к DOM-элементу компонента
метод $wire.find,
который находит элемент по селектору внутри компонента
метод $wire.all,
который находит все элементы по селектору внутри компонента
свойство $wire,
которое предоставляет доступ к JavaScript-интерфейсу компонента