CBWIRE
v4.x
v4.x
  • Introduction
  • How It Works
  • Getting Started
  • Configuration
  • Releases
    • What's New With 4.1
    • What's New With 4.0
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Resources
  • Upgrading from CBWIRE 3.x
  • Upgrading from CBWIRE 2.x
  • CBWIRE CLI
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Data Binding
    • Actions
    • Events
    • Nesting Components
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Features
    • Single-file Components
    • Alpine.js
    • Lazy Loading
    • Form Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Directives
    • wire:click
    • wire:confirm
    • wire:dirty
    • wire:ignore
    • wire:init
    • wire:key
    • wire:loading
    • wire:model
    • wire:navigate
    • wire:offline
    • wire:poll
    • wire:stream
    • wire:submit
    • wire:transition
  • Advanced
    • Troubleshooting
Powered by GitBook
On this page
  • Overview
  • Executing Actions
  • Passing Parameters
  • Magic Actions

Was this helpful?

Export as PDF
  1. The Essentials

Actions

PreviousData BindingNextEvents

Last updated 7 months ago

Was this helpful?

Overview

Actions are methods on your that either change the component's or perform some routine, such as updating your database or anything you can dream up in CFML.

Here is a basic example of how to use it:

// wires/Time.cfc
component extends="cbwire.models.Component" {
    data = {
        "currentTime" : now()
    };
    function updateTime() {
        data.currentTime = now();
    }
}
<!--- wires/time.cfm --->
<cfoutput>
    <div>
        <p>Current time: #currentTime#</p>
        <button wire:click="updateTime">Update</button>
    </div>
</cfoutput>

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

Executing Actions

Some examples of events you can listen for include:

Event
Directive

click

wire:click

keydown

wire:keydown

submit

wire:submit

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

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

<form wire:submit="save">
    <button type="submit">Save</button>
</form>

You can listen for any browser events on elements 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 the page to reload and you will get unintended results.

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

Passing Parameters

You can pass parameters to actions such as actionName( arg1, arg2, arg3 ).

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

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

component extends="cbwire.models.Component" {
    function addTask( taskName ){
        queryExecute( "
            insert into tasks (
                name
            ) values (
                :name
            )
        ", { name = arguments.taskName } ); // Adds 'Some Task'
    }
}

Magic Actions

Action
Description

$refresh

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.

// wires/SayHello.cfc
component extends="cbwire.models.Component" {
    data = {
        "message": ""
    };
    function setMessageToHello() {
        data.message = "Hello";
    }
}
<!--- wires/sayhello.cfm --->
<div>
    #message#
    <button wire:click="$set( 'message', 'Hello' )">Say Hi</button>
</div>

Livewire listens for browser events and invokes actions on your using directives. These directives are used in your HTML and follow the format: wire:[browser event]=[action].

There are a few magic actions already created on your .

component
data properties
component
templates
components