Svelte input bind JSON array

Question

I followed this svelte tutorial and I wonder if I could do this group binding to a JSON array instead of simple array, for example I would like to do a planets selector:

    <script>
        let planets = [{
                name: 'Jupiter',
                enable: false
            },
            {
                name: 'Saturn',
                enable: false
            },
            {
                name: 'Uran',
                enable: false
            },
            {
                name: 'Neptun',
                enable: false
            },
            {
                name: 'Pluto',
                enable: true
            },
        ];

        $: planets, console.log(planets)
    </script>

    {#each planets as planet}
        <label>
            <input type=checkbox bind:group={planets} name={planet.name} value={planet}>
            {planet.name}
        </label>
    {/each}

This is a REPL. I wonder if there is a way how to properly bind JSON array (enable array field with inputs value) in svelte each loop. Now it pops out with each item as you click as you can see in REPL's console.log and I would like just to uncheck it.

With bind:checked property displays proper way

<input type=checkbox bind:checked={planet.enable} value={planet}>

But this does not change array.enable value on click. Can I achieve responsibility of planets array here?

Gh05d · Accepted Answer · 2020-04-02 13:27:11Z

1

I think the problem is that you set the value to planet. When you remove this and only use the checked property, then the array updates with the proper value.

<script>
    let planets = [{
            name: 'Jupiter',
            enable: false,
        },
        {
            name: 'Saturn',
            enable: false
        },
        {
            name: 'Uran',
            enable: false
        },
        {
            name: 'Neptun',
            enable: false
        },
        {
            name: 'Pluto',
            enable: true
        },
    ];
        $: planets, console.log(planets)
</script>

{#each planets as planet}
    <label>
        <input type=checkbox bind:checked={planet.enable}>
        {planet.name}
    </label>
{/each}

You can checkout my REPL.

Here is a screenshot from the update:

edited Apr 2, 2020 at 13:27

answered Apr 2, 2020 at 8:58

Gh05d

9,06211 gold badges42 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kube Kubow Over a year ago

thank you for response, however if I use checked property as you suggest, it still does not mutate planets array (the line $: planets, console... outputs still the original array over and over)

Gh05d Over a year ago

Are you sure? For me it outputs the array with the enable property changed. svelte.dev/repl/570853ca84cf4124a7744470e1bdb1a7?version=3.20.1

Kube Kubow Over a year ago

If I enable all checks it shows me in the console log: Array(5)[ ▶ 0: Object { name: "Jupiter" ,enable: false } ▶ 1: Object { name: "Saturn" ,enable: false } ▶ 2: Object { name: "Uran" ,enable: false } ▶ 3: Object { name: "Neptun" ,enable: false } ▶ 4: Object { name: "Pluto" ,enable: true } length: 5 ] the only one enabled are the default ones (Pluto in this case) I would also expect to be reactive this way, but I cant see it :)

Gh05d Over a year ago

When you check another one, the enable property changes to true.I updated my answer with a screenshot.

Kube Kubow Over a year ago

It is a bug in svelte REPL console as described in github.com/sveltejs/svelte-repl/issues/80 - be aware those, that are not relying on browser's console log

|

Collectives™ on Stack Overflow

Svelte input bind JSON array

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related