Событие $set
Событие $set в JavaScript используется для изменения
свойства компонента Livewire из клиентского кода.
Оно принимает два параметра: имя свойства и новое значение.
После вызова $set Livewire автоматически обновляет
шаблон компонента, отражая изменения на странице.
Синтаксис
$wire.$set('propertyName', newValue)
Где propertyName - имя свойства компонента,
а newValue - новое значение для этого свойства.
Пример
Давайте изменим значение свойства $num
по нажатию на кнопку с помощью $set:
<?php
namespace AppLivewire;
use LivewireComponent;
class Counter extends Component
{
public $num = 0;
public function render()
{
return view('livewire.counter');
}
}
?>
<div>
<button wire:click="$set('num', 10)">
Set to 10
</button>
<span>{{ $num }}</span>
</div>
Результат выполнения кода:
<button>
Set to 10
</button>
<span>10</span>
Пример
Используем $set для изменения свойства
из JavaScript-обработчика события:
<?php
namespace AppLivewire;
use LivewireComponent;
class Counter extends Component
{
public $num = 0;
public function render()
{
return view('livewire.counter');
}
}
?>
<div>
<button id="setButton">
Set to 5
</button>
<span>{{ $num }}</span>
<script>
document.getElementById('setButton').addEventListener('click', function() {
@this.$set('num', 5)
})
</script>
</div>
Результат выполнения кода:
<button>
Set to 5
</button>
<span>5</span>
Пример
Изменим строковое свойство $text
с помощью $set:
<?php
namespace AppLivewire;
use LivewireComponent;
class Message extends Component
{
public $text = 'Hello';
public function render()
{
return view('livewire.message');
}
}
?>
<div>
<button wire:click="$set('text', 'Goodbye')">
Change text
</button>
<p>{{ $text }}</p>
</div>
Результат выполнения кода:
<button>
Change text
</button>
<p>Goodbye</p>
Пример
Изменим массив $arr с помощью
$set:
<?php
namespace AppLivewire;
use LivewireComponent;
class ArrayComponent extends Component
{
public $arr = [1, 2, 3, 4, 5];
public function render()
{
return view('livewire.array-component');
}
}
?>
<div>
<button wire:click="$set('arr', ['a', 'b', 'c', 'd', 'e'])">
Change array
</button>
<p>{{ implode(', ', $arr) }}</p>
</div>
Результат выполнения кода:
<button>
Change array
</button>
<p>a, b, c, d, e</p>
