Accessing Helper Methods in Your Livewire Components
Anyone who is familiar with Livewire has probably used computed properties at some point. The magic behind them isn't actually all that magic.
Computed properties are accessed using the $this
context of the Blade view. Livewire has a custom Blade compiler that essentially binds an instance of the component to $this
so that magic methods can be used to intercept calls to non-existent "computed" properties.
This does open up some cool ideas though - one of them being helper methods on the component class.
The idea
Wouldn't it be amazing if you could change:
<div>
<select wire:model="selected">
@foreach(range(1, 100) as $number)
<option value="{{ $number }}">
{{ $number }}
</option>
@endforeach
</select>
@if($selected > 0 && $selected % 2 === 0 && $selected < 50)
<strong>
Congrats! Your number is even and in the correct range!
</strong>
@endif
</div>
Into this:
<div>
<select wire:model="selected">
@foreach($this->range() as $number)
<option value="{{ $number }}">
{{ $number }}
</option>
@endforeach
</select>
@if($this->selectionIsValid())
<strong>
Congrats! Your number is even and in the correct range!
</strong>
@endif
</div>
All of the logic for the iterable value and whether or not a valid selection has been can be moved out of the view and into the component class.
The how
It's not difficult. Move all of the logic into methods on the component class and Bob's your uncle, you've refactored to helper methods on your component class.
class Selection extends Component
{
public function range()
{
return range(1, 100);
}
public function selectedIsValid()
{
return $this->selected > 0 && $this->selected < 50 && $this->selected % 2 === 0;
}
}
The why
Personally, I like this approach since it my views are clearer and easier to follow. I'm not having to search through a clouded chunk of conditional mayhem to find out where something is being output. Instead, I can use appropriately named methods to describe the condition being checked and move on with my life.
Another benefit is that I can now use any protected
or private
dependencies from my class without needing to explicitely pass them through to the view, or use a computed property.
Sign off
If you found this little trick useful, let me know on Twitter and share some examples of where you have benefited from it.
Note: This feature isn't documented as part of Livewire's public API, so there could be some unexpected behaviour if used incorrectly. The same API is used for computed properties so without a major version update and breaking changes, this is unlikely going to change any time soon.