Let’s suppose I have this as main page:
<script> import Child from "./Child.svelte"; let person = { name: "" };</script><Child {person} />And this as a child:
<script> export let person; let name; $: name = person.name;</script><input bind:value={name} />You can try it here.
The reason I don’t directly bind person.name is because I don’t want to mutate parent objects at all, I prefer to throw an event.
I expected to be able to modify the name variable of the child component by typing values in the input. A modification in the parent element However it doesn’t work at all, because the input remains empty whatever I type in it.
After having created this minimal example and put console.log everywhere, it seems that the line $: name = person.name is triggered right after I type something in the input field, while it shouldn’t because person.name doesn’t change, the assigned variable does.
It is surely very easy but I can’t understand why this behaviour happens, so thanks in advance for any help