bind - 在 Svelte 中，当复选框位于组件中时如何绑定(bind) :group work,？

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 存储库上搜索了问题。这是报道issue .