Comment lier la valeur d'une entrée de sélection, avec des options créées dynamiquement dans Svelte

voix
0

J'ai un composant svelte avec une entrée de sélection, qui est rempli avec des données provenant d'une source externe.

Comment puis-je lie l'entrée de sélection de sorte que est sélectionné une option spécifique.

Si je fais les valeurs de l'option ou la valeur sélectionnée statique, il semble fonctionner très bien, mais pas si les deux sont dynamiques.

Voici mon 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>

À partir du code, c'est la sortie HTML.

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

Je pense qu'une fois la page chargée, l'option 3 « 2018 » serait sélectionné, mais il ne change pas et « - Select saison - » est l'option sélectionnée.

Créé 09/10/2019 à 12:56
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Cela semble fonctionner dans cet exemple simplifié de votre code: https://svelte.dev/repl/d95c63158f944ce996aaef092e4bff73?version=3.12.1

Je dois noter que si vous modifiez la valeur initiale sélectionnée pour

let selected = 3;

Il ne travaille plus, donc les questions est la valeur de params.seasonId

Créé 10/10/2019 à 14:48
source utilisateur

voix
0

Cela devrait fonctionner correctement.

Sans voir plus de code, je pense que serait params.seasonIdet season.idsont de différents types (une chaîne et l'autre numéro)

Créé 09/10/2019 à 13:25
source utilisateur

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