在 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

似乎 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。你没有在那里绑定组。我更新了 it。它应该是这样的：

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

实际上，我在 Svelte Github 存储库上搜索了问题。这是报道 issue.

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>

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

In Svelte how to make bind:group work, when checkbox is in component?

bind

svelte

svelte-component