Variables

• Accessing Variables
  • Dot Notation
  • Bracket Syntax
• Error Handling
• Examples

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'] }

alice.johnson@example.com

---

Error Scenario: Undefined Variable

{ props.user.address.street }

Output empty string

---