Атрибут Json

Атрибут #[Json] используется в классах компонентов Livewire для автоматического преобразования свойства в JSON-строку при синхронизации с клиентской стороной. Это позволяет работать со сложными структурами данных, такими как массивы и объекты, сохраняя их целостность.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesJson;
	
	class ExampleComponent extends Component
	{
		#[Json]
		public $property;
	}
?>

Пример

Давайте создадим компонент, который хранит массив данных в свойстве $data и преобразует его в JSON:

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

<div>
	<pre>{{ json_encode($data) }}</pre>
</div>

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

<pre>["a","b","c","d","e"]</pre>

Пример

Давайте используем #[Json] со свойством, которое содержит ассоциативный массив:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesJson;
	
	class UserComponent extends Component
	{
		#[Json]
		public $user = [
			'name' => 'John Doe',
			'email' => 'john@example.com',
			'age' => 30
		];
		
		public function render()
		{
			return view('livewire.user-component');
		}
	}
?>

<div>
	<p>Name: {{ $user['name'] }}</p>
	<p>Email: {{ $user['email'] }}</p>
	<p>Age: {{ $user['age'] }}</p>
</div>

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

<div>
	<p>Name: John Doe</p>
	<p>Email: john@example.com</p>
	<p>Age: 30</p>
</div>

Пример

Давайте добавим метод для изменения JSON-данных и обновления свойства компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesJson;
	
	class UpdateComponent extends Component
	{
		#[Json]
		public $items = [1, 2, 3, 4, 5];
		
		public function addItem()
		{
			$this->items[] = count($this->items) + 1;
		}
		
		public function render()
		{
			return view('livewire.update-component');
		}
	}
?>

<div>
	<button wire:click="addItem">Add Item</button>
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<button>Add Item</button>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</div>

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

атрибут #[Validate],
который определяет правила валидации для свойств
атрибут #[On],
который слушает события в компоненте
атрибут #[Reactive],
который делает свойство реактивным
атрибут #[Url],
который синхронизирует свойство с URL-параметром