AlpineJS Skill: Displaying Dynamic Text (`x-text`)

Displaying a property directly: x-text="propertyName"

This will take the value of propertyName from your Alpine component's data scope and set it as the textContent of the HTML element. For example, if your x-data includes { message: "Hello World" }, then <span x-text="message"></span> will render as <span>Hello World</span>.

<div x-data="{ greeting: 'Welcome to AlpineJS!' }">
  <p x-text="greeting"></p> <!-- Outputs: Welcome to AlpineJS! -->
</div>

Using JavaScript expressions: x-text="'Hello, ' + name"

You can use any valid JavaScript expression within x-text. This allows for more complex dynamic text, like concatenating strings, performing calculations, or calling functions. Remember that literal strings within the expression must be enclosed in quotes (single or double).

<div x-data="{ user: 'Alice', score: 100 }">
  <p x-text="'User: ' + user + ' | Score: ' + (score * 2)"></p>
  <!-- Outputs: User: Alice | Score: 200 -->
</div>

Trying to render HTML with x-text:

x-text sets the textContent property of an element. This means any HTML tags within the data string will be displayed as literal text, not rendered as HTML elements. This is a security feature to prevent XSS attacks by default.

For instance, if myData is "<strong>Important</strong>", then <div x-text="myData"></div> will display: <strong>Important</strong> literally on the page.

If you explicitly need to render HTML from a string (and you trust the source of that HTML), use the x-html directive instead. Be very careful with x-html if the content comes from user input, as it can open your application to security vulnerabilities.

Forgetting quotes for literal strings in expressions:

When combining reactive data with static text, remember standard JavaScript string concatenation rules. Literal strings must be enclosed in quotes. For example, x-text="'User: ' + username" is correct. If you write x-text="User: " + username (without quotes around User: ), JavaScript will try to find a variable named User, likely resulting in an error or unexpected behavior (e.g., User is not defined).

Assuming x-text automatically formats data:

x-text displays data "as is". It does not perform any automatic formatting for dates, numbers, or other data types. If you need to format data (e.g., display a JavaScript Date object in a human-readable format, or format a number with commas and decimal places), you have a couple of options:

1. Pre-format it in your x-data: Create a computed property (a getter) or a method in your Alpine component that returns the formatted string.

   // In Alpine.data
   {
     timestamp: new Date(),
     get formattedTimestamp() {
       return this.timestamp.toLocaleDateString();
     }
   }
   // In HTML
   <span x-text="formattedTimestamp"></span>

2. Use JavaScript formatting functions within the x-text expression:

   <div x-data="{ amount: 1234.56, eventDate: new Date(2024, 0, 20) }">
     <p x-text="'Price: $' + amount.toFixed(2)"></p>
     <p x-text="'Event on: ' + eventDate.toLocaleDateString('en-GB')"></p>
   </div>

   While this works, for more complex formatting, defining a getter or method in your component keeps your HTML cleaner.