CODEWITHSUNDEEP
javascriptsveltesvelte-3two-way-binding
Fred Hors
Fred Hors

Reputation: 4156

Why is this parent variable not changing?

Why in this REPL: https://svelte.dev/repl/0b2fc740a59847c19b2471b4a1459d42?version=3.38.3 name in App.svelte is not updated when I change it with form's input?

name in Form.svelte changes.

Why?

Isn't two-way binding always on?

Upvotes: 0

Views: 76

Answers (1)

Samathingamajig
Samathingamajig

Reputation: 13283

You never bound the parent's name to the child's name

Just passing the the parent's name as a prop to the child gave the child's name a default value, but it became disconnected once the child's version was modified (also, if the parent rerendered, I'm 99% sure the child would've lost state). You needed to bind name like this:

<h1><Form bind:name></Form></h1>

Svelete REPL link: https://svelte.dev/repl/30859806c88c449daba8be279fbce537

<!-- App.svelete -->

<script>
    import Form from "./Form.svelte";
    
    let name = 'world';
    
    $: console.log("name:", name)
</script>

name in App.svelte: {name}

<!-- **bind the name** -->
<h1><Form bind:name></Form></h1>

<!-- Form.svelete -->

<script>
    export let name;
</script>

name in Form.svelte: {name}

<form on:submit|preventDefault>
    <input id="name" bind:value={name} />
</form>

Upvotes: 1

Related Questions