How to Prevent saving "selected" in Select element as Object rather than string on form submit ?

[escapingSamsara]

Hello !

I have an issue that is driving me crazy since i cant find a solution or my error.

I am using svelte-select to utilize in a form element.

The code is shown here (.svelte):

`<script>
import {store} from "../../stores/store.js";
import Select from 'svelte-select';
import Input from "./Input.svelte";

export let cards= [
{value: '1', label: 'card 1'},
{value: '2', label: 'card 2'},
]
</script>

form on:submit|preventDefault={handleSubmit}
Input label="LABEL" bind:value={$store.label}/
Select items={cards} bind:selected={$store.card}
placeholder="Choose Card" showChevron required clearable={false}/
button type="submit" Add Card /button /form

`

when i use this and select card1, submitting the form, the console.log($store) results in:
Object { label: "string", card: {value: '1', label: 'card1' }}

how can i make sure that the Select component only adds the value of the card to the $store ?
It makes me so mad because i cant find any examples online, so i really hope someone of you guys can help me ")

Best wishes

PS: (why cant i use <> to indicate html tags ? gets removed from post if i do so....)

[smohanty92]

I'm having the same issue. My workaround is using bind:justValue and binding that to a local var. I don't want to have to introduce more vars though. I still like this better than introducing a try/catch w/ JSON.parse though