Mostrar contenido HTML con variables reactivas: x-data, click y x-show 4 in Alpine JS

Lo que vamos a hacer en este video es exactamente el mismo ejercicio que hicimos antes que lo colo aquí rapidito fue para probar que todo funcionara Okay ya que aquí no me da bueno ningún mensaje entonces me parece importante cerrar esto de la manera correcta pero voy a querer hacer esto desde cero así que si entendiste el ejercicio de la clase anterior perfectamente puedes brincar este video ya que otra vez no vamos a variar mucho simplemente ve los últimos segundos del mismo bueno aclarado eso vamos allá entonces qué es lo primero que tenemos que hacer al trabajar con alpine como te comentaba todo comienza con un x aquí en vez de colocar el v de Vue:

x-if
v-if

Siempre vamos a colocar un x bueno no de alpin pero bueno así funciona la sintaxis un x y un y aquí sería la directiva que quieras emplear en este caso es el de Data que como te comentaba nos permite definir un bloque de data en este caso se define mediante un objeto un objeto de javascript tal cual puedes ver aquí definimos variables Entonces en este caso una llamada open:

<div x-data="{ open:false }">
    <button x-on:click="open=!open">Dame un click</button>
    <div x-show="open">
        Oculto por defecto
    </div>
</div>

En el ejemplo anterior es para mostrar algo bajo demanda de manera reactiva, es decir automáticamente al cambiar el valor de open, se muestra el contenido.

Entonces es lo que estoy colocando acá Bueno finalmente aquí no estamos haciendo mucho por aquí sería la parte ya del como quien dice componente en sí que es lo que vas a hacer aquí mostrar ocultar lo que sea entonces aquí es donde entra también el cliente ya que en la mayoría de los casos los componentes son para que el usuario interactúe con él por lo tanto tenemos varias formas como puedes ver la documentación oficial pero el archiconocido clit no puede faltar que es cuando le pegamos un clck a algo entonces por aquí hacemos algo por qu aquí colocamos una ara y no colocamos una sintaxis como esta bueno porque esto es un bl esto es una directiva y esto viene siendo un evento esta es la diferencia fundamental al igual que ocurre en vue y similares otra vez esto es un evento entiéndese que el propósito de un evento es cuando ocurra valgar la redundancia un evento un evento click un evento en cambio del texto:

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

Es decir que estés escribiendo o dejaste de escribir etcétera un evento personalizado ejecutamos algo mientras que esto es una declaración es decir esto se ejecuta en base a lo que decida el cliente cuando haga algo el cliente y esto se ejecuta ya de manera automática cuando carga la página entonces tenemos ahí una sintaxis es un poquito distinta por lo demás aquí esto puede ser un método y demás pero no vamos a complicarnos es un ejemplo mínimo y en este caso hacemos algo en este caso tal cual puedes ver en la documentación oficial colocamos esto en true lo que significa que bueno ya cambió de valor aquí coloco Cualquier cosa click y finalmente qué hacemos con ese con esta variable entonces en este caso es mostrar un contenido colocamos un spam y aquí colocamos el contenido que queremos Mostrar colocamos content Entonces cómo utilizamos la variable arriba hay muchas formas pero usualmente se emplea en base a condiciones o condicionales aquí en el pin tenemos dos al igual que ocurre con View el show que como te indicaba antes renderiza este elemento html pero lo oculta mediante un display no y el If que simplemente no lo renderiza Entonces vamos a ir primero con el X show y no completa y aquí simplemente colocamos la expresión al igual que ocurre con los condicionales que como esto es un bullano directamente no hace falta indicar que esto es igual igual a true aunque lo puedes dejar si quieres pero ya eso se encuentra como quien dice predefinido por defecto y aquí lo tenemos.

Funcionamiento de Alpine

Fíjate que cuando cargas la página como está cargando alpine lo está trayendo como quien dice internet tiene que hacer la consulta obviamente si tú no cargas esto esto de abajo es simplemente atributos personalizados que no estás haciendo nada entonces se cargaría de esta forma mientras que cuando ya está cargando alpine significa que ya que alpine va a empezar a buscar como quien dice va a traquear el código que estemos colocando y va a ver que es lo que tiene que cambiar a nivel del componente. Entonces vamos a procesarlo como tal en base a las reglas del framework y en base a lo que te estoy explicando el evento y todo lo demás ya que esto otra vez como quien dice es javascript personalizado por así decirlo personalizado por alpin entonces es por eso que ves aquí que al principio carga rapidito si lo tuvieras en local local sería inmediato Entonces por lo demás funciona de igual manera qué otras cosas podemos hacer aquí otro punto importante son los errores es decir aquí obviamente tenemos que seguir una sintaxis que sea válida al igual que ocurre con javascript si aquí por ejemplo no sé colocamos un carácter que obviamente no va por aquí nos va a dar unos bonitos errores tal cual puedes ver nos indica más o menos dónde está el mismo ahí tú tienes que buscarlo pero aquí te dice que esta expresión no es válida e no sabe qué hacer con esto porque esto no es válido entonces ya lo demás se rompe y es lo que te está indicando por acá entonces tienes que detectar cuál es el problema.

Sintaxis libre de errores

Pero es importante que también entiendas que siempre esto tiene que estar libre de errores porque si no no va a funcionar tal cual puedes ver aquí se rompió y no está haciendo nada entonces aquí tienes que darte cuenta de qué es lo que está pasando por ejemplo si quito esto un poco lo mismo no es una expresión válida esto no se declara así la expresión de dos puntos es cuando estamos trabajando con los objetos entonces tiene que tener ahí sus llaves ya una vez lo dejes válida entonces va a funcionar sin problemas por lo demás lo mismo aquí en el click si que colocas algo incorrecto obviamente no lo va a tomar y si que colocas una expresión en javascript que no sea válida por aquí te lo va a indicar te va a indicar que no sabe que es trus o debería bueno justamente cuando le pegas un click esto no está definido no sabe qué es eso y obviamente aquí lo mismo no le puedes colocar un v aunque me provoque porque simplemente no lo va a tomar no sabes qué es esto ya es eso es un atributo personalizado que no pinta nada para al Pin y lo mismo aquí tiene que ser una expresión completamente válida si no no va a funcionar entonces son cositas que tienes que tener pendiente o presentes al momento de trabajar con al pin d igual que ocurre con javascript clásico de toda la vida todo lo que estés colocando tiene que ser completamente válido por ejemplo aquí vamos a hacer el toggle voy a colocar que sea el negado de esto para cambiar un poquito y ya terminaron y puedes ver que lo que hace es el tokel entiéndase que si esto es true Entonces lo está negando sería falso y si esto es falso lo está negando sería true entonces es por eso que se se presenta de esa forma así que pues nada vamos a dejarlo hasta aquí y seguimos en la siguiente clase

19-11-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Mostrar contenido HTML con variables reactivas: x-data, click y x-show 4 in Alpine JS