Simple arrays converted to objects

[ianengelbrecht]

May I ask the reason that arrays of primitive values are converted to arrays of { value:value label:value }? From the simple example:

<script> import Select from 'svelte-select'; let items = ['One', 'Two', 'Three']; let value = null; </script>

<Select {items} bind:value />

{#if value}

Selected value: {value.label}

{/if}

It would be simpler if I could do:

Selected value: {value}

My actual use case is binding the value of Select to an array property of an object:

<script> import Select from 'svelte-select'; let items = ['One', 'Two', 'Three']; const myData = { arr: ['One', 'Three'] }; </script>

<Select {items} bind:value={myData.arr}/>

Selected value: {myData.arr.join('|')}

[samal-rasmussen]

You can use Function bindings which became available in Svelte 5.9:
https://svelte.dev/docs/svelte/bind#Function-bindings

Demos:
Simple
Christmas countdown

The functions are named get and set, but I have an easier time thinking of them as in and out, as the first function is for values going into the component, and the second are for values coming out of it.

Example:

bind:value={
	() => {
		if (my_value == null) {
			return null;
		}
		const found = my_value_options.find(
			(o) => o.value === my_value,
		);
		return found;
	},
	(v) => {
		if (v == null) {
			return (my_value = null);
		}
		my_value = v.value;
	}
}

Rather verbose, but it works.