Svelte 输入绑定 JSON 数组

Question

我遵循this 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}

This 是一个 REPL。我想知道是否有一种方法可以在每个循环中正确绑定 JSON 数组（启用带有输入值的数组字段）。现在它会在您单击时弹出每个项目，正如您在 REPL 的 console.log 中看到的那样，我只想取消选中它。

使用 bind:checked 属性显示正确

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

但这不会改变 array.enable 单击时的值。我可以在这里实现行星阵列的职责吗？

Answer 1

我认为问题在于您将值设置为行星。当您删除它并仅使用选中的属性时，数组会更新为正确的值。

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

这是更新的屏幕截图：