x-ref para crear referencias de elementos HTML en Alpine.js

Vamos a conocer otra característica que sería la de la del x-ref que nos permite tal cual indica su nombre de cierta forma referenciar un elemento html en otras palabras viene siendo lo mismo que colocar el document ElementById o querySelector o los 10 que existen en javascript:

document.querySelector(".claseEjemplo")

Pero sería la forma de Alpine su uso es sencillo simplemente le colocamos una etiqueta es decir como si fuera el ID la clase el nombre un atributo personalizado lo que tú quieras y a partir de aquí lo referenciamos de la siguiente forma siempre recuerda que las referencias a los dólar son algo común en este tipo de frameworks:

<div x-data="{text:'Hello Alpine!'}">
    <input type="text" x-model="text">
    <p x-text="text"></p>
    <span class="classExample" x-ref="textRef">Text Example</span>
    <button @click="$refs.textRef.innerText=text">Click!</button>
    <button @click="console.log($refs.textRef)">Click!</button>
</div>

Y es para hacer una separación entre lo que serían el nombre de nuestras variables que usualmente o nunca le colocamos un dólar con los que Serían como quien dice del mismo framework es decir esto es una variable pero es definida a nivel del framework así que le coloco ó para hacer esa distinción entonces colocamos refed por aquí el nombre que le hayamos colocado en este ejemplo es textRef y por aquí accedemos a sus atributos funciones todo lo demás todo lo que es el Api de javascript que en este caso es la propiedad llamada innerText que es para ya sea obtener el texto o ya sea para establecer un texto Ahorita vamos a hacer una referencia más completa en caso de que no lo pilles pero otra vez es básicamente el getElementById cu selector etcétera que tenemos en javascript de toda la vida pero en este caso es la forma de Alpine.

10-12-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• x-ref para crear referencias de elementos HTML en Alpine.js