Svelte ввода связать JSON массив

Question

Я следовал этому учебнику svelte, и мне интересно, смогу ли я сделать привязку этой группы к массиву JSON вместо простого массива, например, я хотел бы сделать селектор планет:

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

Этот является REPL. Интересно, есть ли способ, как правильно связать массив JSON (включить поле массива со значением входов) в svelte каждый l oop. Теперь он появляется с каждым элементом, когда вы щелкаете, как вы можете видеть в REPL console.log, и я хотел бы просто снять его.

При использовании свойства bind: флажок отображается правильно

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

Но это не меняет значение array.enable при клике. Могу ли я добиться ответственности массива планет здесь?

Answer 1

Мне кажется, проблема в том, что вы установили значение pl anet. Когда вы удаляете это и используете только проверенное свойство, массив обновляется с правильным значением.

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

Вы можете оформить мой REPL .

Вот скриншот из обновления: