Data Properties

Similar to Vue.js and other frontend JavaScript frameworks, you can define reactive properties on your components.
Defining Properties
You can define and initialize properties on your components using data. 
component extends="cbwire.models.Component"{
    data = {
        "task": ""
    };
}
Data properties can only be data types that are castable to JavaScript data types, such as CFML strings, numeric, arrays, structs, or booleans.

If you are needing more complex data types for your templates, use computed properties instead.
When data properties are mutated, the UI will update also.
Accessing Properties
Data Variable
You can reference a property using data.[propertyName].
component extends="cbwire.models.Component"{
​
    property name="taskService" inject="[email protected]";
    
    // Data properties
    data = {
        "task": ""
    };
    
    // Action
    function addTask(){
        taskService.create( data.task );
    }
}
Getters
Getter methods are automatically available for your properties based on the property's name. You to access the property within your component using this.get[propertyName](). 
component extends="cbwire.models.Component"{
    
    property name="taskService" inject="[email protected]";
​
    // Data properties
    data = {
        "task": ""
    };
    
    // Action
    function addTask(){
        taskService.create( this.getTask() );
    }
}
You can use this as an alternative to using data.
Templates
You can reference data properties within your component template using args.[propertyName].
<cfoutput>
<div>
    <h1>Task</h1>
    <div>#args.task#</div>
</div>
</cfoutput>
Resetting Properties
You can reset a property back to it's initialized value using reset().
component extends="cbwire.models.Component"{
​
    // Data properties
    data = {
        "task": "Some task here"
    };
​
    // Action
    function resetForm() {
        reset( "task" ); // Reverts data.task to 'Some task here'
    }
​
}
You can also pass an array of property names. 
reset( [ "property1", "property2" ] );
Security
Your component's private variables scope will hold your data property definitions and current values, but it's necessary to be cautious about what you store. 
The values of your data properties are included with each XHR response and Livewire uses these values to determine what should be updated in the DOM.
You should NEVER store sensitive data ( such as passwords, SSNs ) that you wouldn't want your application's users to see.
​

Essentials - Previous

Components

Next - Essentials

Computed Properties

Last modified 6mo ago

Export as PDF

Copy link

On this page

Defining Properties

Accessing Properties

Data Variable

Getters

Templates

Resetting Properties

Security