Вычисляемое свойство get
Вычисляемое свойство get в Livewire позволяет объявлять динамические свойства, которые вычисляются на основе других свойств или состояния компонента. Чтобы создать вычисляемое свойство, нужно определить метод с префиксом get и суффиксом Property, например, getFullNameProperty. Livewire автоматически вызывает этот метод при обращении к свойству в шаблоне.
Вычисляемые свойства удобны для форматирования строк, фильтрации массивов, выполнения сложных преобразований данных без необходимости хранения промежуточных результатов в публичных свойствах.
Синтаксис
Для создания вычисляемого свойства определите в классе компонента метод с именем getИмяСвойстваProperty:
<?php
namespace AppLivewire;
use LivewireComponent;
class ExampleComponent extends Component
{
public function getFullNameProperty()
{
return 'John Doe';
}
public function render()
{
return view('livewire.example-component');
}
}
?>
В шаблоне обращайтесь к свойству через его имя без префикса get и суффикса Property, как к обычному публичному свойству:
<div>
<p>{{ $fullName }}</p>
</div>
Пример 1
Создадим компонент, который вычисляет полное имя из свойств $firstName и $lastName через вычисляемое свойство $fullName:
<?php
namespace AppLivewire;
use LivewireComponent;
class UserProfile extends Component
{
public $firstName = 'John';
public $lastName = 'Doe';
public function getFullNameProperty()
{
return $this->firstName . ' ' . $this->lastName;
}
public function render()
{
return view('livewire.user-profile');
}
}
?>
<div>
<p>First name: <input type="text" wire:model="firstName"></p>
<p>Last name: <input type="text" wire:model="lastName"></p>
<p>Full name: {{ $fullName }}</p>
</div>
Результат выполнения кода после ввода значений:
<div>
<p>First name: <input type="text" value="Jane"></p>
<p>Last name: <input type="text" value="Smith"></p>
<p>Full name: Jane Smith</p>
</div>
Пример 2
Вычисляемое свойство может возвращать результат обработки массива. Создадим компонент, который вычисляет количество элементов массива:
<?php
namespace AppLivewire;
use LivewireComponent;
class ArrayCounter extends Component
{
public $items = ['a', 'b', 'c', 'd', 'e'];
public function getCountProperty()
{
return count($this->items);
}
public function render()
{
return view('livewire.array-counter');
}
}
?>
<div>
<p>Items: {{ implode(', ', $items) }}</p>
<p>Count: {{ $count }}</p>
</div>
Результат выполнения кода:
<div>
<p>Items: a, b, c, d, e</p>
<p>Count: 5</p>
</div>
Пример 3
Вычисляемое свойство может возвращать отфильтрованный массив. Создадим компонент, который вычисляет четные числа из массива:
<?php
namespace AppLivewire;
use LivewireComponent;
class EvenNumbers extends Component
{
public $numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
public function getEvenProperty()
{
return array_filter($this->numbers, function($num) {
return $num % 2 == 0;
});
}
public function render()
{
return view('livewire.even-numbers');
}
}
?>
<div>
<p>All numbers: {{ implode(', ', $numbers) }}</p>
<p>Even numbers: {{ implode(', ', $even) }}</p>
</div>
Результат выполнения кода:
<div>
<p>All numbers: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10</p>
<p>Even numbers: 2, 4, 6, 8, 10</p>
</div>
