Data Properties
Define reactive properties for your UI Wires with just a few lines of code.
Similar to Vue.js and other frontend JavaScript frameworks, you can define reactive properties on your Wires.
component extends="cbwire.models.Component"{
data = {
"task": ""
};
}
Data Properties are parsed and tracked by Livewire and JavaScript, therefore only data types that are castable to JavaScript can be stored in Data Properties (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.
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 );
}
}
Getter methods are automatically available for your properties based on the property's name. You to access the property within your Wire 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.You can reference data properties within your Wire's template using
args.[propertyName].<cfoutput>
<div>
<h1>Task</h1>
<div>#args.task#</div>
</div>
</cfoutput>
You can reset properties back to their original value using
reset().component extends="cbwire.models.Component"{
// Data properties
data = {
"task": "Some task here"
};
// Action
function resetForm() {
data.task = "Another value";
reset( "task" ); // Reverts data.task to 'Some task here'
}
}
There are several ways to use reset.
function someAction() {
reset( "task" ); // resets 'task' data property
reset( [ "task", "anotherprop" ] ); // reset multiple properties at once
reset(); // resets all properties
}
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, and SSNs ) that you wouldn't want your application's users to see.
Last modified 15d ago