Директива wire:model.boolean

Директива wire:model.boolean является модификатором стандартной директивы wire:model и предназначена для работы с булевыми значениями. Она преобразует значение поля ввода в true или false при привязке к свойству компонента. Особенно полезна для чекбоксов и переключателей, где значение должно быть строго булевым, а не строковым.

Синтаксис

<input type="checkbox" wire:model.boolean="propertyName">

Пример

Давайте создадим компонент с булевым свойством $isActive и привяжем его к чекбоксу с помощью wire:model.boolean:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Settings extends Component
	{
		public $isActive = true;
		
		public function render()
		{
			return view('livewire.settings');
		}
	}
?>

<div>
	<input type="checkbox" wire:model.boolean="isActive">
	<span>Status: {{ $isActive ? 'Active' : 'Inactive' }}</span>
</div>

Результат выполнения кода при отмеченном чекбоксе:

<input type="checkbox" checked>
<span>Status: Active</span>

Пример

Сравним работу обычного wire:model и модификатора .boolean. В первом случае в свойство будет записана строка "on" или null, во втором - булево значение:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Comparison extends Component
	{
		public $stringValue = 'off';
		public $boolValue = false;
		
		public function render()
		{
			return view('livewire.comparison');
		}
	}
?>

<div>
	<label>
		<input type="checkbox" wire:model="stringValue">
		String: {{ $stringValue }}
	</label>
	<br>
	<label>
		<input type="checkbox" wire:model.boolean="boolValue">
		Boolean: {{ $boolValue ? 'true' : 'false' }}
	</label>
</div>

Результат выполнения кода при отмеченных обоих чекбоксах:

<label>
	<input type="checkbox" checked>
	String: "on"
</label>
<br>
<label>
	<input type="checkbox" checked>
	Boolean: true
</label>

Пример

Модификатор .boolean также может использоваться с радио-кнопками для установки определенного булева значения в зависимости от выбора:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserForm extends Component
	{
		public $isAdmin = false;
		public $isEditor = false;
		
		public function render()
		{
			return view('livewire.user-form');
		}
	}
?>

<div>
	<label>
		<input type="radio" wire:model.boolean="isAdmin" value="1">
		Administrator
	</label>
	<br>
	<label>
		<input type="radio" wire:model.boolean="isEditor" value="1">
		Editor
	</label>
	<br>
	<span>Admin: {{ $isAdmin ? 'Yes' : 'No' }}</span>
	<br>
	<span>Editor: {{ $isEditor ? 'Yes' : 'No' }}</span>
</div>

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

<label>
	<input type="radio" checked>
	Administrator
</label>
<br>
<label>
	<input type="radio">
	Editor
</label>
<br>
<span>Admin: Yes</span>
<br>
<span>Editor: No</span>

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

директиву wire:model,
которая привязывает поле ввода к свойству компонента
модификатор wire:model.number,
который преобразует значение в число
модификатор wire:model.live,
который обновляет свойство при каждом изменении
модификатор wire:model.blur,
который обновляет свойство при потере фокуса