$wire.set()

Метод $wire.set используется в JavaScript-контексте для изменения свойства компонента Livewire. Он принимает два аргумента: имя свойства в виде строки и новое значение. После установки Livewire автоматически обновляет DOM компонента.

Синтаксис

$wire.set('propertyName', newValue)

Пример

Давайте изменим числовое свойство $num по клику на кнопку:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<button wire:click="setNum">Set to 10</button>
	<span>{{ $num }}</span>
</div>

document.querySelector('button').addEventListener('click', function() {
	$wire.set('num', 10);
});

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

<button>Set to 10</button>
<span>10</span>

Пример

Установим строковое значение в свойство $text:

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

<div>
	<button x-on:click="$wire.set('text', 'new value')">Update</button>
	<span>{{ $text }}</span>
</div>

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

<button>Update</button>
<span>new value</span>

Пример

Установим массив в свойство $arr:

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

<div>
	<button onclick="$wire.set('arr', [1, 2, 3])">Set new array</button>
	<ul>
		@foreach ($arr as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<button>Set new array</button>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

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

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