Actions

• Introduction
• Passing Action Parameters
• Event Modifiers
  • Keydown Modifiers
• Magic Actions

Introduction

The goal of actions in Livewire is to be able to easily listen to page interactions, and call a method on your Livewire component (re-rendering the component).

Here's the basic usage:

            
1class ShowPost extends Component
2{
3    public Post $post;
4 
5    public function like()
6    {
7        $this->post->addLikeBy(auth()->user());
8    }
9}        

            
1<div>
2    <button wire:click="like">Like Post</button>
3</div>        

Livewire currently offers a handful of directives to make listening to browser events trivial. The common format for all of them is: wire:[dispatched browser event]="[action]".

Here are some common events you may need to listen for:

Here are a few examples of each in HTML:

        
1<button wire:click="doSomething">Do Something</button>    

        
1<input wire:keydown.enter="doSomething">    

        
1<form wire:submit.prevent="save">
2    ...
3 
4    <button>Save</button>
5</form>    

Passing Action Parameters

You can pass extra parameters into a Livewire action directly in the expression like so:

        
1<button wire:click="addTodo({{ $todo->id }}, '{{ $todo->name }}')">
2    Add Todo
3</button>    

Extra parameters passed to an action, will be passed through to the component's method as standard PHP params:

        
1public function addTodo($id, $name)
2{
3    ...
4}    

Action parameters are also capable of directly resolving a model by its key using a type hint.

        
1public function addTodo(Todo $todo, $name)
2{
3    ...
4}    

If your action requires any services that should be resolved via Laravel's dependency injection container, you can list them in the action's signature before any additional parameters:

        
1public function addTodo(TodoService $todoService, $id, $name)
2{
3    ...
4}    

Event Modifiers

Like you saw in the keydown example, Livewire directives sometimes offer "modifiers" to add extra functionality to an event. Below are the available modifiers that can be used with any event.

Keydown Modifiers

To listen for specific keys on keydown events, you can pass the name of the key as a modifier. You can directly use any valid key names exposed via KeyboardEvent.key as modifiers by converting them to kebab-case.

Here is a quick list of some common ones you may need:

        
1<input wire:keydown.page-down="foo">    

In the above example, the handler will only be called if event.key is equal to 'PageDown'.

Magic Actions

In Livewire, there are some "magic" actions that are usually prefixed with a "$" symbol:

You can pass these as the value of an event listener to do special things in Livewire.

Let's take $set() for example. It can be used to manually set a component property's value. Consider the Counter component's view.

Before

        
1<div>
2    {{ $message }}
3    <button wire:click="setMessageToHello">Say Hi</button>
4</div>    

After

        
1<div>
2    {{ $message }}
3    <button wire:click="$set('message', 'Hello')">Say Hi</button>
4</div>    

Notice that we are no longer calling the setMessageToHello function, we are directly specifying, what we want data set to.

It can also be used in the backend when listening for an event. For example, if you have one component that emits an event like this:

        
1$this->emit('some-event');    

Then in another component you can use a magic action for example $refresh() instead of having to point the listener to a method:

        
1protected $listeners = ['some-event' => '$refresh'];