rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.27k stars 180 forks source link

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

Open escapingSamsara opened 1 year ago

escapingSamsara commented 1 year ago

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

`

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 commented 11 months ago

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