Campos de textos y variables: x-model y x-text en Alpine JS - 5

Conoceremos el funcionamiento de la reactividad de Alpine.js conociendo los atributos de x-model y x-test y una variable.

El siguiente ejercicio consiste en conocer cómo emplear tanto el bloque de data en este caso para definir una variable y esta variable la vamos a emplear no solamente para definir un texto y emplearlo O imprimirlo sino también para definir lo que sería en View y similares como un bmel o lo que también trabajamos en Livewire como lo que sería un wire:model es decir una propiedad una variable como lo quieras llamar con la cual nosotros vamos a poder hacer una sincronización bidireccional entre un campo de texto un ampo de formulario por ejemplo un textarea select lo que sea en este ejemplo es un campo de texto con lo que sería ya la definición de la variable y esto lo vamos a ver fácilmente cuando por aquí definamos nuestro campo de texto y por otra parte lo imprimamos para hacer cualquier otra operación como te comentaba antes esto viene siendo el equivalente de lo que sería el v-model en Vue exactamente lo mismo así que bueno para esto vamos a crear otro componente:

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

Eso sería todo por acá entonces ya con esto fíjate que cuando escribamos acá automáticamente se sincroniza en la variable de texto que es lo importante y si nosotros cambiáramos algo en el input, con esto también se sincronizar por en el párrafo  esto era el ejemplo que era el que tenía aquí en el libro pero lo podemos extender un poquito más para mostrar precisamente esa bidireccional:

<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>

En este otro ejemplo, al dar un click sobre el botón, se actualiza la variable text con un texto predefinod. Pues nada ya con esto conocemos tanto el x-model y también los x-text y también su funcionamiento bidireccional como te comentaba al inicio.

09-11-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Campos de textos y variables: x-model y x-text en Alpine JS - 5