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
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>