Open fsoft72 opened 6 months ago
Try this instead:
<script>
import Select from 'svelte-select';
const complexItems = [
{value: 'chocolate', label: 'Chocolate', group: 'Sweet'},
{value: 'pizza', label: 'Pizza', group: 'Savory'},
{value: 'cake', label: 'Cake', group: 'Sweet', selectable: false},
{value: 'chips', label: 'Chips', group: 'Savory'},
{value: 'ice-cream', label: 'Ice Cream', group: 'Sweet'}
];
let initial = ['chocolate', 'pizza'];
let selected = initial;
const changeVal = ( e ) => {
const items= e.detail;
selected = items.map ( ( el ) => el.value );
}
$: console.log(selected);
</script>
<h2>Multi</h2>
<Select
items={complexItems}
multiple={true}
value={initial}
on:change={changeVal}
/>
I have a Select with complex items that shows some selected items at startup. Items are defined in
items
correctly andvalues
just contains the items'value
field not the whole object.When the Select is first rendered, everything is fine, but when the user selects another value and the
values
variable is updated with just the IDs of items, the Select shows the ids and not the labels anymore.I have created a small REPL showing the problem here
I am also copy / pasting the whole code here: