Директива @entangle

Директива @entangle используется в Blade-шаблонах компонентов Livewire для связывания публичного свойства компонента с переменной Alpine.js. Это позволяет синхронизировать данные между серверным компонентом Livewire и клиентским JavaScript-фреймворком Alpine в реальном времени. Директива принимает имя свойства компонента в качестве аргумента.

Синтаксис

<div x-data="{ alpineVar: @entangle('propertyName') }">
</div>

Пример

Давайте свяжем свойство $text компонента с переменной Alpine и выведем ее значение:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Message extends Component
	{
		public $text = 'Hello';
		
		public function render()
		{
			return view('livewire.message');
		}
	}
?>

<div x-data="{ message: @entangle('text') }">
	<p x-text="message"></p>
</div>

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

<div>
	<p>Hello</p>
</div>

Пример

Изменим значение свойства через поле ввода с двусторонней привязкой:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Message extends Component
	{
		public $text = 'Hello';
		
		public function render()
		{
			return view('livewire.message');
		}
	}
?>

<div x-data="{ message: @entangle('text') }">
	<input type="text" x-model="message">
	<p x-text="message"></p>
</div>

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

<div>
	<input type="text" value="world">
	<p>world</p>
</div>

Пример

Свяжем массив свойств с переменной Alpine и отобразим его элементы:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ListComponent extends Component
	{
		public $items = ['a', 'b', 'c', 'd', 'e'];
		
		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<div x-data="{ list: @entangle('items') }">
	<ul>
		<template x-for="item in list" :key="item">
			<li x-text="item"></li>
		</template>
	</ul>
</div>

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

<div>
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>
</div>

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

директиву @livewire,
которая вставляет компонент Livewire в шаблон Blade
директиву @livewireStyles,
которая подключает CSS-стили Livewire
директиву @livewireScripts,
которая подключает JavaScript-скрипты Livewire
директиву @script,
которая выполняет JavaScript-код внутри компонента