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:

class ShowPost extends Component
{
    public Post $post;

    public function like()
    {
        $this->post->addLikeBy(auth()->user());
    }
}
<div>
    <button wire:click="like">Like Post</button>
</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:

<button wire:click="doSomething">Do Something</button>
<input wire:keydown.enter="doSomething">
<form wire:submit.prevent="save">
    ...

    <button>Save</button>
</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">

Passing Action Parameters

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

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

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

public function addTodo($id, $name)
{
    ...
}

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

public function addTodo(Todo $todo, $name)
{
    ...
}

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:

public function addTodo(TodoService $todoService, $id, $name)
{
    ...
}

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 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
<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

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

After

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

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

← Previous Topic

Properties

Next Topic →

Events