wire:click

Overview

You can listen for click events within your templates using wire:click and provide an action to run when clicked.

// ./wires/MyForm.cfc
component extends="cbwire.models.Component" {
    data = {
        "sent": false
    };
    function sendEmails(){
        sleep( 2000 ); // pretend this takes a while
        data.sent = true;
    }
}

<!--- ./wires/myform.cfm --->
<div>
    <button type="button" wire:click="sendEmail">Send Important Emails</button>
    <cfif sent>
        <div>Check your spam folder. We spammed you.</div>
    </cfif>
</div>

Add wire:click on any HTML elements, not just buttons and links.

Using on links

When adding wire:click to links, you need to include the .prevent modifier to stop the default handling of a link in the browser. Otherwise, the browser will load the link and update the page's URL.

<a href="#" wire:click.prevent="sendEmail">Click</a>