Text fields and variables: x-model and x-text in Alpine JS - 5

We will learn how Alpine.js reactivity works by learning about the x-model and x-test attributes and a variable.

The following exercise consists of knowing how to use both the data block in this case to define a variable and this variable we are going to use not only to define a text and use it or print it but also to define what would be in View and similar such as a bmel or what we also work on in Livewire as what would be a wire: model that is, a property, a variable as you want to call it with which we are going to be able to do a bidirectional synchronization between a text field, a form field, for example a textarea select whatever it is in this example it is a text field with what would be the definition of the variable and we will easily see this when we define our text field here and on the other hand we print it to do any other operation as I mentioned before, this is the equivalent of what would be the v-model in Vue exactly the same so well for this we are going to create another component:

<div x-data="{ text:'' }">
   <input type="text" x-model="text"/>
   <p x-text="text"></p>
</div>

That would be all for here, so with this, notice that when we write here it is automatically synchronized in the text variable, which is the important thing, and if we change something in the input, with this it will also be synchronized in the paragraph. This was the example that I had here in the book, but we can extend it a little more to show precisely that bidirectional:

<div x-data="{ text:'' }">
   <input type="text" x-model="text"/>
   <p x-text="text"></p>
   <button x-on:click="text='andres'">Dame un click</button>
</div>

In this other example, when clicking on the button, the text variable is updated with a predefined text. So, with this we know both the x-model and also the x-text and also their bidirectional operation as I mentioned at the beginning.

09-11-2024 - Andrés Cruz

En español

• Category
• /
• JavaScript
• /
• Text fields and variables: x-model and x-text in Alpine JS - 5