Svelte

Pasar parámetros a función de Svelte

En Svelte podemos indicar funciones que se van a invocar cuando se desencadena un evento. Por ejemplo, para invocar a holaMundo en el click de un elemento podemos indicarlo como on:click={holaMundo}

En ocasiones se necesita pasar parámetros a esa función dentro de un componente de Svelte, pero no podemos indicarlo así:

on:click={holaMundo(parametro)}

Ya que eso ejecutará la función tan pronto se cargue el componente, y no esperará al clic. Por ello es que en este post te mostraré cómo pasar argumentos a las funciones en Svelte sin que se invoquen automáticamente.

Pasar parámetros a función en Svelte

Si quieres la solución rápida, mira lo siguiente. Para pasar argumentos, define una función anónima y dentro de esa función invoca a la verdadera función pasando el verdadero argumento. Así:

on:click={()=>{holaMundo(parametro)}}

Hay que separar las cosas. La definición de la función queda así: ()=>{holaMundo(parametro)}

Y estamos indicando esa función dentro del on:click={}

También podemos pasar el event y el propio elemento del DOM, pero eso lo explicaré en otra sección más adelante.

Entendiendo el funcionamiento de Svelte

En este y otros frameworks, se debe indicar la función que se va a invocar en el evento. Le debemos dar algo que se evalúe en una función o que básicamente sea del tipo function.

Por ello es que si tenemos una función llamada holaMundo, debemos indicarlo así:

on:click={holaMundo}

También es válido (pero no funcionará de la manera que se espera) usar paréntesis e invocar a la función, así:

on:click={holaMundo()}

Pero en ese caso lo que se haría es invocar a la función y Svelte esperaría que holaMundo regrese una función. Sí: se esperaría que al invocar a la función, la misma devuelva otra función que se ejecutaría al hacer clic.

Además, esa función sería invocada al inicio cuando el componente sea montado

Pasando el evento y el elemento del DOM

En varias ocasiones es necesario obtener el elemento del DOM en donde se desencadenó el evento así como el evento en cuestión. En ese caso podemos hacerlo así:

on:change={(event) => {
    onEstadoInputCambiado(event);
}}

Nota: aquí en lugar de click estoy escuchando el evento change; recuerda que solo es para ejemplificar.

Lo importante es que estamos pasando el evento, y luego dentro de la función podemos acceder al mismo así como al elemento del DOM:

const onEstadoInputCambiado = async (event) => {
    const propioElemento = event.target;
};

Tenemos al evento en event y al elemento del DOM en event.target.

Pasando otros parámetros

Para finalizar veamos cómo pasar parámetros propios, más allá del evento y elemento HTML.

Yo tengo un conjunto de elementos input checkbox repetidos con each, cuando se cambia el estado quiero invocar a una función y pasarle el elemento del each que en este caso sería elemento.terminado.

Lo hago así:

{#each nota.elementos as elemento, indice}
    <div class="flex items-center">
        <input
            type="checkbox"
            on:change={(event) => {
                onEstadoInputCambiado(event, elemento.terminado);
            }}
        />
    </div>
{/each}

En resumen

Si la función no tiene parámetros, ejecútala así:

on:click={holaMundo}

Si quieres pasar parámetros:

on:click={()=>{holaMundo("parámetro 1", "parámetro 2")}}

Si quieres pasar el evento y argumentos:

on:click={(event)=>{holaMundo(evento, "parámetro 1", "parámetro 2")}}

Nota final: estoy usando parámetros y argumentos como sinónimos.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.