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

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

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

这是更新的屏幕截图：

Svelte 输入绑定 JSON 数组

Svelte input bind JSON array

arrays

json

svelte