Alpine JS provides x-text directive to display some text dynamically on the web page. You can display any information you want on the web page using x-text with other Alpine JS directives. This post covers almost all the use cases where you need to x-text directive.
How to Use x-text in Alpine JS.
Before using x-text directive, you need data. You can use that data to with x-text and an HTML tag anywhere on the web page. The following example uses a span tag and x-text to set the innerText value.
|
1 2 3 4 5 6 7 |
<div x-data="{websiteTitle:'LatestJavaScript.com'}" x-cloak=""> <span x-text="websiteTitle"></span> </div> |
Using x-text with x-if Directive
You can also use the x-text directive inside a template with x-if directive to render something based on a condition. The following example uses a template with x-if directive to display a span with x-text.
|
1 2 3 4 5 6 7 8 9 |
<div x-data="{title:'LatestJavaScript.com', showTitle:false}" x-cloak=""> <template x-if="showTitle"> <span x-text="title"></span> </template> </div> |
The above code will not display anything because the showTitle is false.
Using x-text with Simple Array and For Loop in Alpine JS
When working on a real-world project, you might have to loop through an array to display some text with x-text. The following example uses an array of items in the cart with x-for in Alpine JS to display data.
|
1 2 3 4 5 6 7 8 9 |
<div x-data="{items: ['Laptop', 'Mobile', 'Charger', 'Bag']}" x-cloak=""> <template x-for="item in items"> <li x-text="item"></li> </template> </div> |
Using x-text with Array of Objects Alpine JS
You might have an API in your project that return an array of objects that you want to use x-text to display data. You can also use x-for with an array of objects combined with x-text directive. The following example displays information about 2 users with x-for and x-text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div x-data="{users: [ { id: 1, name: 'John', age: 22 }, { id:2, name: 'David', age: 44 } ]}" x-cloak="" > <template x-for="user in users" :key="user.id"> <li x-text="user.name"></li> </template> </div> |
The above example will display 2 names on the screen from the array of objects.
Conclusion
You can use x-text directive anywhere in your project that will display the information dynamically. The x-text directive can be used within a x-if template or x-for template.