Data Properties

The state of the our components.

Components have state known as Data Properties.

Data Properties are defined by creating a data structure on your component and assigning each property a default value.

<!--- ./wires/SomeComponent.cfm --->
<cfscript>
    data = {
        "propertyName": "defaultValue"
    };
</cfscript>

Property names must be surrounded by single or double quotes.

JavaScript is a case-sensitive language and CFML isn't. To preserve the casing of your property names, you must surround them with quotes.

// Bad
data = {
    propertyName: "defaultValue"
};

// Good
data = {
    "propertyName": "defaultValue"
};

Data Properties are parsed by JavaScript and therefore can only store values that are JavaScript friendly: strings, numeric, arrays, structs, or booleans.

Data Properties are visible to JavaScript. You SHOULD NOT store sensitive data in them.

Initial Values

Data properties should be assigned a default value, even if it's just an empty string.

<cfscript>
    data = {
        "success": false,
        "message: "Hello World"
    };
</cfscript>

Using Data Properties

You can access Data Properties from within your component Actions like so.

<cfscript>
    // Data properties
    data = {
        "task": ""
    };
    
    // Action
    function addTask(){
        taskService.create( data.task );
        data.task = "";
    }
</cfscript>

You can also reference Data Properties within your component template using #propertyName#.

<cfoutput>
    <div>
        <h1>Task</h1>
        <div>#task#</div>
    </div>
</cfoutput>

Resetting Data Properties

You can reset properties back to their original value inside your Actions using reset().

<cfscript>
    // Data properties
    data = {
        "message" : "Hello world"
    };
    
    // Actions    
    function resetForm() {
        reset();
    }
</cfscript>

<cfoutput>
    <div>
        <button wire:click="resetForm">Reset</button>
    </div>
</cfoutput>

You can reset individual or all Data Properties.

function resetForm() {
    reset( "message" ); // resets 'message' data property
    reset( [ "message", "anotherprop" ] ); // reset multiple properties at once
    reset(); // resets all properties
}

You also can reset all properties EXCEPT the properties you pass.

function resetForm() {
    resetExecept( "email" );
    resetExcept( [ "email", "phoneNumber" ] );
}

Data Binding

You can bind your data properties and HTML elements using wire:model.

<cfscript>
    // Data properties
    data = {
        "message" : "",
        "isChecked": false,
        "isSelected": "",
        "hero": ""
    };
</cfscript>

<cfoutput>
    <div>
        <form>
            <input wire:model="message" type="text">
            <input wire:model="isChecked" type="checkbox" value="true">
            <input wire:model="isSelected" name="isSelected" type="radio" value="true">
            <input wire:model="isSelected" name="isSelected" type="radio" value="false">
            <select wire:model="hero">
               <option value=""></option>
                <option value="Batman">Batman</option>
                <option value="Superman">Superman</option>
            </select>
        </form>
    </div>
</cfoutput>

There are also several modifiers you can add to control when and how requests are sent to your server.