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

Директива wire:model.number является модификатором стандартной директивы wire:model. Она автоматически преобразует строковое значение из инпута в число перед сохранением в свойство компонента Livewire. Это полезно при работе с полями, которые должны содержать числовые данные (например, возраст, цена, количество).

Директива вешается на элементы ввода (input, textarea) и принимает имя свойства компонента в качестве значения. В отличие от обычного wire:model, который сохраняет строки, модификатор .number приводит данные к типу float.

Синтаксис

<input type="text" wire:model.number="propertyName">

Пример

Пусть в компоненте есть свойство $num со значением 0. Сделаем инпут, который будет обновлять это свойство через директиву wire:model.number, и выведем текущее значение с проверкой типа данных:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class NumberExample extends Component
	{
		public $num = 0;

		public function render()
		{
			return view('livewire.number-example');
		}
	}
?>

<div>
	<input type="text" wire:model.number="num">
	<p>Значение: {{ $num }}</p>
	<p>Тип: {{ gettype($num) }}</p>
</div>

Если ввести в поле число 42, то свойство $num станет числом 42, а не строкой '42':

<input type="text">
<p>Значение: 42</p>
<p>Тип: integer</p>

Пример

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

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Calculator extends Component
	{
		public $a = 0;
		public $b = 0;

		public function getSumProperty()
		{
			return $this->a + $this->b;
		}

		public function render()
		{
			return view('livewire.calculator');
		}
	}
?>

<div>
	<input type="text" wire:model.number="a" placeholder="Число A">
	<input type="text" wire:model.number="b" placeholder="Число B">
	<p>Сумма: {{ $this->getSumProperty() }}</p>
</div>

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

<input type="text" placeholder="Число A">
<input type="text" placeholder="Число B">
<p>Сумма: 15</p>

Пример

Если пользователь вводит нечисловое значение, wire:model.number возвращает NaN (Not a Number). Покажем это на примере с проверкой через is_nan:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class NumberCheck extends Component
	{
		public $value = 0;

		public function render()
		{
			return view('livewire.number-check');
		}
	}
?>

<div>
	<input type="text" wire:model.number="value">
	<p>Значение: {{ $value }}</p>
	<p>is_nan: {{ is_nan($value) ? 'true' : 'false' }}</p>
</div>

При вводе текста 'abc' свойство $value станет равным NaN, а проверка is_nan вернёт true:

<input type="text">
<p>Значение: NAN</p>
<p>is_nan: true</p>

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

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