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

user_1480170 0
Viewed 2274

I worked with bind:group for checkbox when it is not in component. Now when I try to make checkbox with label a component it is not working.

CheckboxWithLabel.svelte (component)

<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 (page)

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

A brief example of working bind:group when it is done without component.

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

Source: https://www.freecodecamp.org/news/the-svelte-handbook/#svelte-lifecycle-events

svelte-component svelte bind
3 Answers

Actually, I searched through issues on Svelte Github repo. And this is reported issue.

user_14801700

To my knowledge this still does not work.
Here's a simple workaround :
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>
user_88388210

Seems like the problem why CheckboxWithLabel.svelte (component) does not work is that bindgroup is initialized as a string and not as an array:

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

I created a REPL here with your code for checking and testing.

EDIT: I just checked your REPL. You did not bind the group there. I updated it. It should look like this:

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