Alpine x-data

Директива x-data является основой Alpine.js и служит для объявления реактивного состояния внутри HTML-элемента. В значение передаётся объект JavaScript, содержащий свойства и методы, которые будут доступны внутри этого элемента. В контексте Livewire директива позволяет создавать клиентское состояние, независимое от серверных данных, для реализации быстрых интерфейсных взаимодействий без обращения к серверу.

Синтаксис

<div x-data="{ property: value, method() { ... } }">
	...
</div>

Пример

Объявим локальное состояние open для управления видимостью блока:

<div x-data="{ open: false }">
	<button @click="open = !open">
		Toggle dropdown
	</button>
	
	<div x-show="open" class="dropdown-content">
		<p>Dropdown content</p>
	</div>
</div>

Пример

Создадим счётчик с использованием x-data и методов:

<div x-data="{
	count: 0,
	increment() {
		this.count++
	},
	decrement() {
		this.count--
	}
}">
	<button @click="decrement">-</button>
	<span x-text="count"></span>
	<button @click="increment">+</button>
</div>

Пример

Используем инициализацию состояния с помощью init:

<div x-data="{
	message: '',
	init() {
		this.message = 'Hello, Alpine!'
	}
}">
	<p x-text="message"></p>
</div>

Пример

Объединим Alpine с Livewire для гибридного подхода:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name = 'John';
		public $age = 30;
		
		public function updateAge()
		{
			$this->age++;
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div x-data="{ editing: false }">
	<div x-show="!editing">
		<p>Name: {{ $name }}</p>
		<p>Age: {{ $age }}</p>
		<button @click="editing = true">Edit</button>
		<button wire:click="updateAge">+1 age</button>
	</div>
	
	<div x-show="editing" x-cloak>
		<input type="text" wire:model="name">
		<button @click="editing = false">Save</button>
	</div>
</div>

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

директиву Alpine.js в Livewire,
которая описывает использование Alpine в компонентах
функцию $wire,
которая предоставляет доступ к Livewire из JavaScript
функцию $wire.set,
которая изменяет свойство компонента из JavaScript
функцию $wire.call,
которая вызывает метод компонента из JavaScript