Svelte: Element event directives reactivity

Created on 8 Feb 2020  路  2Comments  路  Source: sveltejs/svelte

I'm in a context similar to the one below:

Some DOM element (here a button), which when clicked should call a callback function (test), which may change depending on a certain state (the variable bool)

let bool = false

let foo = () => console.log("foo")
let bar = () => console.log("bar")

$: test = bool ? foo : bar;

When the variable bool change, the callback is only updated when writing the directive like this:

<button on:click={() => test()} />

But if written that way, the callback will keep its first value even if the state change:

<button on:click={test} />

I would expect the two declarations to behave in the same way.

Replicate:
https://svelte.dev/repl/ca0fbda83f654f5a8829282a59f511f1?version=3.18.1

bug

Most helpful comment

All 2 comments

3836 and a few followup PRs added support for dynamic event handler when the compiler can see that the event handler is getting reassigned (e.g,, if the swap() function instead directly assigned either foo or bar to test, this would work), but apparently it's not taking this reactive declaration into account.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ricardobeat picture ricardobeat  路  3Comments

plumpNation picture plumpNation  路  3Comments

mmjmanders picture mmjmanders  路  3Comments

rob-balfre picture rob-balfre  路  3Comments

juniorsd picture juniorsd  路  3Comments