Svelte events are the way we add interactivity to components in Svelte. A common issue with Svelte events is adding arguments to functions called within them. For example, suppose we have a basic counter, which increases any time the user clicks on it:



<script> // we write export let to say that this is a property // that means we can change it later! let x = 0; const addToCounter = function() { ++x; } </script> <button id="counter" on:click={addToCounter}>{x}</button>

This works fine, but let’s say we want to change it so that we increase the counter by a certain amount whenever it is clicked. We might try changing the code to something like this:

Source de l’article sur DZONE