# Data Properties

Similar to Vue.js and other frontend JavaScript frameworks, you can define reactive properties on your [Wires](/v2-1/essentials/creating-components.md).

## Defining Properties

You can define and initialize properties on your [Wires](/v2-1/essentials/creating-components.md) using `data`. 

```javascript
component extends="cbwire.models.Component"{
    data = {
        "task": ""
    };
}
```

{% hint style="warning" %}
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](/v2-1/essentials/computed-properties.md) instead.
{% endhint %}

{% hint style="success" %}
When data properties are mutated, the UI will update also.
{% endhint %}

## Accessing Properties

### Data Variable

You can reference a property using `data.[propertyName]`.

```javascript
component extends="cbwire.models.Component"{

    property name="taskService" inject="TaskService@myapp";
    
    // 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 Wire using `this.get[propertyName]()`. 

```javascript
component extends="cbwire.models.Component"{
    
    property name="taskService" inject="TaskService@myapp";

    // Data properties
    data = {
        "task": ""
    };
    
    // Action
    function addTask(){
        taskService.create( this.getTask() );
    }
}
```

{% hint style="success" %}
You can use this as an alternative to using `data`.
{% endhint %}

### Templates

You can reference data properties within your Wire's template using `args.[propertyName]`.

```xml
<cfoutput>
<div>
    <h1>Task</h1>
    <div>#args.task#</div>
</div>
</cfoutput>
```

## Resetting Properties

You can reset properties back to their original value using `reset()`.

```javascript
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.

```javascript
function someAction() {
    reset( "task" ); // resets 'task' data property
    reset( [ "task", "anotherprop" ] ); // reset multiple properties at once
    reset(); // resets all properties
}
```

## 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.&#x20;

{% hint style="success" %}
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](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction).
{% endhint %}

{% hint style="danger" %}
You should NEVER store sensitive data ( such as passwords, and SSNs ) that you wouldn't want your application's users to see.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cbwire.ortusbooks.com/v2-1/essentials/properties.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.