CODEWITHSUNDEEP
javascriptcomponentsparentsveltesvelte-3
benman
benman

Reputation: 317

How to pass the value of a component up to its parent?

I want to bind the value of a select element in a Svelte component (Form.svelte) to the variable active in its parent (App.svelte). I've tried using bind:value={active} on the Form component in App, but this doesn't work because I need to access the select's value. How should I access the value of the select element? Thanks in advance.

Minimum working example: https://svelte.dev/repl/bc872132e21f4071abe5a255728fb0ec?version=3.43.0

Upvotes: 2

Views: 919

Answers (1)

pilchard
pilchard

Reputation: 12911

You need to expose the value property if you want to bind to it. Here, we also bind the value property to the select element so that it is updated with changes to the select.

/* Select.svelte */

<script>
    export let value
</script>

<select bind:value>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

You can then bind to it in your parent

/* App.svelte */

<script>
    import Select from './Select.svelte'
    
    let active;
</script>

<Select bind:value={active}/>

<p>{active}</p>

REPL

Upvotes: 3

Related Questions