I have a <select> bound to activity.status like so:
<script>
import Dropdown from './Dropdown.svelte'
let activity = {
id: 1,
projectName: "Test Project",
lead: {id: 10, value: "Unassigned"},
status: {id: 3, value: "Closed"},
statusDetail: {id: 15, value: "Missing Budget"}
}
let statusOptions = [
{ id:1, value:"Open"},
{ id:2, value:"On-Hold"},
{ id:3, value:"Closed"}
]
$:console.log(activity.status);
</script>
<select bind:value={activity.status}>
{#each statusOptions as option}
<option value={option} >{option.value}</option>
{/each}
</select>
<!-- <Dropdown options={statusOptions} bind:selected={activity.status}/> -->
The $:console.log(activity.lead) fires every time I update the <select>.
But once I use the <Dropdown/> instead, it fires twice. Here is the component:
<script>
export let selected = {}
export let options = [{id:0, value: "No Options..."}]
</script>
<select bind:value={selected}>
{#each options as option}
<option value={option} >{option.value}</option>
{/each}
</select>
I don't have huge knowledge in svelte, but I studied the API and searched on stackoverflow. The only thing I didn't try was emitting a custom event. But that seems like a bit of extra code and unelegant. I don't mind the double update but it seems stupid. So I would like to know: Why does that happen? Should I emit custom event instead? Or did I make some basic mistake?
Thank you, Filip
