bind - 在 Svelte 中，当复选框位于组件中时，如何使 bind:group 工作？

Question

当它不在组件中时，我使用了 bind:group 复选框。现在，当我尝试使用标签制作复选框时，它不起作用。

CheckboxWithLabel.svelte（组件）

<script>
    export let label="";
    export let bindGroup="";
    export let value="";
</script>
<label class="container">{label}
    <input type="checkbox" bind:group={bindGroup} value={value} />
    <span class="checkmark"></span>
</label>

SettingsSession.svelte（页面）

import CheckboxWithLabel from '@/components/ui/CheckboxWithLabel';

<script>
let sessionLengths = [5, 15];
$: console.log('duration', sessionLengths);
</script>

<div class="form-group">
    <h5>Select live session durations</h5>
    <CheckboxWithLabel label='5 minutes' bindGroup={sessionLengths} value="5"/>
    <CheckboxWithLabel label='15 minutes' bindGroup={sessionLengths} value="15"/>
    <CheckboxWithLabel label='30 minutes' bindGroup={sessionLengths} value="30"/>
    <CheckboxWithLabel label='45 minutes' bindGroup={sessionLengths} value="45"/>
    <CheckboxWithLabel label='60 minutes' bindGroup={sessionLengths} value="60"/>
    <CheckboxWithLabel label='90 minutes' bindGroup={sessionLengths} value="90"/>
    <CheckboxWithLabel label='120 minutes' bindGroup={sessionLengths} value="120"/>
</div>
...

一个在没有组件的情况下使用 bind:group 的简短示例。

<script>
let goodDogs = []
let dogs = ['Roger', 'Syd']
</script>

<h2>
  Who's a good dog?
</h2>

<ul>
  {#each dogs as dog}
    <li>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></li>
  {/each}
</ul>

<h2>
  Good dogs according to me:
</h2>

<ul>
  {#each goodDogs as dog}
    <li>{dog}</li>
  {/each}
</ul>

资料来源：https ://www.freecodecamp.org/news/the-svelte-handbook/#svelte-lifecycle-events

Answer 1

实际上，我搜索了 Svelte Github repo 上的问题。这是报告的问题。

Answer 2

似乎为什么CheckboxWithLabel.svelte (component)不起作用的问题是 bindgroup 被初始化为字符串而不是数组：

<script>
  export let label="Herbert";
  export let bindGroup=[]
  export let value="Herbert";
  export let value2="Robert"
  export let label2="Robert"
</script>

我在这里使用您的代码创建了一个REPL用于检查和测试。

编辑：我刚刚检查了你的 REPL。您没有在那里绑定该组。我更新了它。它应该如下所示：

<Checkbox label="Herbert" bind:bindGroup={selectedNames} value="Herbert"/>
<Checkbox label="Robert" bind:bindGroup={selectedNames} value="Robert"/>
<Checkbox label="Mike" bind:bindGroup={selectedNames} value="Mike"/>

Answer 3

据我所知，这仍然行不通。
这是一个简单的解决方法：
https ://svelte.dev/repl/02d60142a1cc470bb43e0cfddaba4af1?version=3.38.3

<script>
    import Checkbox from './Checkbox.svelte';
    
    let options = ["1"];
</script>

<Checkbox label="1" value="1" bind:bindGroup={options} />
<Checkbox label="2" value="2" bind:bindGroup={options} />
<Checkbox label="3" value="3" bind:bindGroup={options} />

{options}

<script>
    export let label = "";
    export let bindGroup = [];
    export let value = "";
    
    function onChange({ target }) {
        const { value, checked } = target;
        if (checked) {
            bindGroup = [...bindGroup, value]
        } else {
            bindGroup = bindGroup.filter((item) => item !== value);
        }
    }
</script>

<label>{label}
  <input type="checkbox"
         {value}
         checked={bindGroup.includes(value)}
         on:change={onChange} />
</label>