You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 3.x.

Actions

Be amazing at Livewire
with our in-depth screencasts.
Watch Now

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:

Event Directive
click wire:click
keydown wire:keydown
submit wire:submit

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>
You can listen for any event dispatched by the element you are binding to. Let's say you have an element that dispatches a browser event called "foo", you could listen for that event like so: <button wire:foo="someAction">
Like the above example using `wire:submit.prevent` directly at the form opening tag will generate "readonly" properties for all html elements inside the form during the requests.

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.

Modifier Description
stop Equivalent of event.stopPropagation()
prevent Equivalent of event.preventDefault()
self Only triggers an action if the event was triggered on itself. This prevents outer elements from catching events that were triggered from a child element. (Like often in the case of registering a listener on a modal backdrop)
debounce.150ms Adds an Xms debounce to the handling of the action.

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:

Native Browser Event Livewire Modifier
Backspace backspace
Escape escape
Shift shift
Tab tab
ArrowRight arrow-right
        
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:

Function Description
$refresh Will re-render the component without firing any action
$set('property', value) Shortcut to update the value of a property
$toggle('property') Shortcut to toggle boolean properties on or off
$emit('event', ...params) Will emit an event on the global event bus, with the provided params
$event A special variable that holds the value of the event fired that triggered the action. Example usage: wire:change="setSomeProperty($event.target.value)"

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'];
← Previous Topic Properties
Next Topic → Events