Skip to main content

​
Accessing Variables

​
Dot Notation

Use dot notation to access object properties within the template context, similar to JavaScript. 
{ props.username }

​
Bracket Syntax

Bracket syntax allows access to object properties using string keys, which is useful for dynamic or complex property names. 
{ props['user-name'] }

​
Error Handling

Accessing an undefined variable will return an empty string. For example: 
{ props.undefinedVar }
Returns nothing (i.e. empty string)

​
Examples

​
Accessing a Defined Variable

{ props.username }
Alice

​
Accessing Nested Properties

{ props.user.firstName } { props.user.lastName }
Alice Johnson

​
Using Bracket Syntax for Dynamic Properties

{ props['user-email'] }
[email protected]

​
Error Scenario: Undefined Variable

{ props.user.address.street }
Output empty string