Methods that are invoked based on user interactions.

Actions are methods on your component that either change the component's state ( Data Properties ) or perform some action needed ( such as updating your database ).

Here is a basic example of how to use it:

    data = {
        "currentTime" : now()
    function updateTime() {
        data.currentTime = now();

        Current time: #currentTime#
    <button wire:click="updateTime">Update</button>

Actions do not need to return any value. Return values are ignored.

Running Actions

CBWIRE listens for browser events and invokes actions using Directives. The directives follow the format: wire:[browser event]=[action].

Some examples of events you can listen for include:








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

You can listen for any browser events on elements by using the wire:[event] directive, where [event] is the event's name. For example, to listen for a "foo" event on a button element, you would use the following code:

<button wire:foo="someAction">

On some elements such as forms or links, you need to add a .prevent modifier to prevent the browser's default behavior. Otherwise, the browser will cause a page reload and you will get unintended results.

<a href="" wire:click.prevent="doSomething">Do Something</a>

Passing Parameters

You can pass parameters to your actions, such as here using actionName( params ).

        <button wire:click="addTask('Some Task')">Add Task</button>

The parameter is then passed through to your Actions via function arguments.

// Action
function addTask( taskName ){
    queryExecute( "
        insert into tasks (
        ) values (
    ", { name = arguments.taskName } );

Magic Actions

There are a few magic actions already available to your components.



Will re-render the component without firing any action

$set( 'dataproperty', value )

Shortcut to update the value of a property

$toggle( 'dataproperty' )

Shortcut to toggle boolean properties off and on

Consider the example below.

    data = {
        "message": ""
    function setMessageToHello() {
        data.message = "Hello";

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


Sometimes you may need to force your component to completely refresh in the DOM. This is particularly true when you have nested components.

        <cfif showTeamForm>
            #wire( "TeamForm" )#
            <button wire:click="selectTeamForm">Show Team Form</button>
            #wire( "UserForm" )#

To force a refresh, simply call refresh() from any action on your component.

    data = {
        "showTeamForm": false

    function selectTeamForm() {
        data.showTeamForm = true;      
        refresh(); // force a refresh

Last updated