Hoe de waarde van een select input, met dynamisch gemaakte opties in Svelte binden

stemmen
0

Ik heb een slanke component met een kiesingang, die wordt gevuld met gegevens van een externe bron.

Hoe kan ik bind de select-ingang zodat een bepaalde optie is geselecteerd.

Als ik de optie waarden of de geselecteerde waarde statisch, het lijkt goed te werken, maar niet als beide zijn dynamisch.

Hier is mijn code

<script>
    export let params = {}

    let seasons = [];
    let selected = '';

    onMount(async () => {
        selected = params.seasonId; 
    /* fetch is called here and returns a list of seasons, which is passed to seasons array */
    })
</script>

<p><select bind:value={selected}>
    <option value= disabled>-- Select Season --</option>
    {#each seasons as season}
    <option value={season.id}>{season.description}</option>
    {/each}
</select></p>
<p>param: {params.seasonId}</p>
<p>Selected: {selected}</p>

Vanuit de code, dit is de HTML-uitvoer.

<p><select>
    <option value= disabled>-- Select Season --</option>
    <option value=4>2019</option>
    <option value=3>2018</option>
    <option value=2>2017</option>
    <option value=1>2016</option>
</select></p>
<p>param: 3</p>
<p>Selected: 3</p>

Ik verwacht dat zodra de pagina is geladen, optie 3 2018 zou worden gekozen, maar het verandert niet en - Selecteer seizoen - is de geselecteerde optie.

De vraag is gesteld op 09/10/2019 om 12:56
bron van user
In andere talen...                            


2 antwoorden

stemmen
0

In dit vereenvoudigd voorbeeld van je code dit lijkt te werken: https://svelte.dev/repl/d95c63158f944ce996aaef092e4bff73?version=3.12.1

Ik moet er rekening mee dat als je de eerste geselecteerde waarde te veranderen

let selected = 3;

Het doet niet meer werken, zodat de problemen is in de waarde van params.seasonId

antwoordde op 10/10/2019 om 14:48
bron van user

stemmen
0

Dit zou moeten werken.

Zonder zien meer code, zou mijn gok zijn dat params.seasonIden season.idvan een ander type (de een string en het andere nummer)

antwoordde op 09/10/2019 om 13:25
bron van user

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more