Атрибут Locked
Атрибут #[Locked] - это PHP-атрибут, который применяется к публичным
свойствам компонента Livewire. Он запрещает изменение значения свойства
на стороне клиента. Если попытаться изменить значение такого свойства
через JavaScript (например, через $wire) или при обновлении
компонента, Livewire отклонит изменения и сохранит исходное значение,
заданное на сервере.
Атрибут принимает один необязательный параметр - булево значение.
По умолчанию установлено true, что означает блокировку свойства.
Значение false отключает блокировку.
Важно: атрибут #[Locked] не влияет на возможность чтения свойства.
В Blade-шаблоне вы по-прежнему можете выводить его значение. Блокируется
только запись через сетевые запросы.
Синтаксис
<?php
use Livewire\Attributes\Locked;
use Livewire\Component;
class ExampleComponent extends Component
{
#[Locked]
public string $protectedField = 'default';
}
?>
Пример
Давайте заблокируем свойство $userId и попробуем изменить его
из действия:
<?php
namespace App\Livewire;
use Livewire\Attributes\Locked;
use Livewire\Component;
class UserProfile extends Component
{
#[Locked]
public int $userId = 1;
public string $name = 'Guest';
public function updateUser(int $newId, string $newName)
{
$this->userId = $newId;
$this->name = $newName;
}
public function render()
{
return view('livewire.user-profile');
}
}
?>
<div>
<p>User ID: {{ $userId }}</p>
<p>User Name: {{ $name }}</p>
<button wire:click="updateUser(2, 'John')">
Update
</button>
</div>
Результат выполнения кода после клика:
<div>
<p>User ID: 1</p>
<p>User Name: John</p>
<button>
Update
</button>
</div>
Как видите, свойство $userId осталось равным 1,
так как оно защищено атрибутом #[Locked], а свойство
$name успешно обновилось.
Пример
Иногда возникает необходимость явно снять блокировку внутри компонента.
Это можно сделать, передав в атрибут параметр false:
<?php
namespace App\Livewire;
use Livewire\Attributes\Locked;
use Livewire\Component;
class Settings extends Component
{
#[Locked(false)]
public int $configVersion = 5;
public function resetVersion()
{
$this->configVersion = 1;
}
public function render()
{
return view('livewire.settings');
}
}
?>
<div>
<p>Config version: {{ $configVersion }}</p>
<button wire:click="resetVersion">
Reset
</button>
</div>
Результат выполнения кода после клика:
<div>
<p>Config version: 1</p>
<button>
Reset
</button>
</div>
Теперь свойство $configVersion изменилось, так как мы явно
отключили блокировку через #[Locked(false)].
