Svelte: onMount and property binding not work correctly
Example:
https://svelte.dev/repl/a4094f9084b248f18d88979c25e1d214?version=3.4.1
let a = 5 is declared before a = 7 runs inside onMount so the expected output value should be 7 both. btw, bind:a does not keep data in sync in this scenario.
clitetailor
All 3 comments
The main fragment.p() thinks a is still being updated, because it only "finishes" updating on the next tick: add_flush_callback(() => updating_a = false);
For now, you can import { tick } from 'svelte' and use it at the start of your onMount method:
onMount(async () => {
await tick()
a = 7
})
kaisermann
on 19 May 2019
I made a related REPL before I found this issue. My workaround was to also add the property to the child component as well, eg.
https://svelte.dev/repl/3c8fe4fb50984f70a45b38b894d62a35?version=3.9.0
jesseskinner
on 21 Aug 2019
Can no longer reproduce with v3.16.4: https://svelte.dev/repl/a4094f9084b248f18d88979c25e1d214?version=3.16.4
StephenStrickland
on 13 Dec 2019
Related issues
davidcallanan
路
3Comments
plumpNation
路
3Comments
davidaq
路
3Comments
Rich-Harris
路
3Comments
lnryan
路
3Comments
Most helpful comment
The main
fragment.p()thinksais still being updated, because it only "finishes" updating on the next tick:add_flush_callback(() => updating_a = false);For now, you can
import { tick } from 'svelte'and use it at the start of youronMountmethod:REPL