Links

Actions

The magic sauce. Actions allow you to easily listen to page interactions and call a method on your Wires.
Actions provide an effortless way to track page interactions and invoke methods on your Wires, resulting in a re-render of the Wire's Template.
Here is a basic example of how to use it:
component extends="cbwire.model.Component"{
// Actions
function addTask(){
queryExecute( ... );
}
}
<!--- Template --->
<div>
<button wire:click="addTask">Add Task</button>
</div>

Invoking Actions

You can listen for browser events and invoke actions using a selection of various Directives. The directives follow the format: wire:[browser event]=[action].
Some examples of events you can listen for include:
Event
Directive
click
wire:click
keydown
wire:keydown
submit
wire:submit
Here are a few examples of each in HTML:
<a href="" wire:click.prevent="doSomething">Do Something</a>
<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 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">

Passing Parameters

You can pass parameters to your actions, such as here using addTask('Some Task').
<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 ){
}

Return Values

Actions shouldn't return any value. Return values are ignored.

Accessing Data Properties

You can access data properties inside your actions directly using data.
data = {
"task": ""
};
// Actions
function clearTasks(){
data.task = "";
}

Accessing Computed Properties

You can access Computed Properties inside your actions directly using computed.
// Computed Properties
computed = {
"tasks": function() {
return queryExecute( "
select *
from tasks
" );
}
};
// Actions
function deleteTasks(){
if ( computed.tasks.recordCount ) {
// query to delete the tasks...
}
}
Notice that our Computed Property above is defined as a closure function, but once our deleteTasks() action is called, the computed property has already been rendered.