typescriptsveltesvelte-5

Svelte 5 and this is undefined


Why I have for this input undefined? Type something and press tab or enter. Svelte is v5.1.3 and I am sure that something is missing.

<script lang="ts">
    let abc11 = $state("");
    
    const izmjeni = (event: HTMLInputElement, data: string) => {
        console.log(event);
        console.log(data);
    }
</script>

<input
    onchange={() => izmjeni(this, "apiData")}
    bind:value={abc11}
    type="text"
/>

Playground


Solution

  • this is not bound in arrow functions.

    Either use a function or define the event object and use event.target/event.currentTarget.

    <input onchange={function () { izmjeni(this, "apiData") }} ...>
    
    <input onchange={e => izmjeni(e.target, "apiData")} ...>
    

    Playground

    (Would generally not recommend using this, it's non-descriptive and has corner cases like this one.)