Директива wire:ref

Директива wire:ref используется для присвоения уникального имени DOM-элементу в шаблоне Livewire, чтобы затем получить к нему доступ из JavaScript-кода компонента. В значении директивы передаётся идентификатор, по которому элемент можно будет найти в объекте $refs. Это аналог ref в Vue.js или ref в React.

Основное предназначение wire:ref - взаимодействие с DOM-элементами через JavaScript, например, для вызова методов focus, scrollIntoView, управления анимациями или интеграции со сторонними библиотеками. Директива может быть добавлена к любому HTML-элементу.

Синтаксис

<div wire:ref="refName">
	Content
</div>

Пример

Давайте получим ссылку на поле ввода и установим на него фокус при загрузке компонента:

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

<div>
	<input type="text" wire:ref="inputField" />
	<button wire:click="focusInput">Focus</button>
</div>

@script
	<script>
		document.addEventListener('livewire:init', function () {
			Livewire.on('setFocus', function () {
				$wire.$refs.inputField.focus();
			});
		});
	</script>
@endscript

В этом примере мы присвоили полю ввода ссылку с именем inputField. При клике на кнопку вызывается метод focusInput, который через JavaScript обращается к элементу по ссылке и вызывает метод focus.

Пример

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

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

<div>
	<button wire:click="scrollToElement">Scroll to bottom</button>
	<div style="height: 2000px; background: linear-gradient(to bottom, #f0f0f0, #ddd);"></div>
	<div wire:ref="targetElement" style="padding: 20px; background: #e0f0ff; border: 2px solid #4a90d9;">
		Target element
	</div>
</div>

@script
	<script>
		document.addEventListener('livewire:init', function () {
			Livewire.on('scrollToElement', function () {
				$wire.$refs.targetElement.scrollIntoView({
					behavior: 'smooth',
					block: 'center'
				});
			});
		});
	</script>
@endscript

После клика на кнопку компонент отправляет событие, которое в JavaScript находит элемент по ссылке targetElement и плавно прокручивает страницу к нему.

Пример

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

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

<div>
	<div wire:ref="messageBox">
		Hello, Livewire!
	</div>
	<button wire:click="logText">Log text</button>
</div>

@script
	<script>
		document.addEventListener('livewire:init', function () {
			Livewire.on('logText', function () {
				const text = $wire.$refs.messageBox.textContent;
				console.log('Text from element:', text);
			});
		});
	</script>
@endscript

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

"Text from element: Hello, Livewire!"

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

директиву wire:click,
которая вызывает метод компонента при клике
директиву wire:model,
которая привязывает поле ввода к свойству компонента
директиву wire:bind,
которая связывает атрибут элемента со свойством компонента
директиву wire:loading,
которая показывает состояние загрузки компонента