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.
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.
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
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
.
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}
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.