Svelte:显示和隐藏复选框时分组复选框绑定(bind)问题

Question

这个问题最好用一个实际的例子来说明。

<script>
    let searchInput = '';
    let values = ['a', 'b', 'c', 'd', 'e', 'f'];
    $: filteredValues = searchInput ? values.filter(v => v.toLowerCase().includes(searchInput.toLowerCase())) : values;
    
    let chosenValues = [];
</script>

<input type="search" placeholder="Search" bind:value={searchInput} />

{#each filteredValues as value (value)}
    <div class="checkbox">
        <input type="checkbox" bind:group={chosenValues} value={value} />
        {value}
  </div>
{/each}

{chosenValues}

也可以在 REPL 上找到:https://svelte.dev/repl/5af87332d81e4d82835bcd0f47ff9d81?version=3.44.1 .

问题发生如下:

1. 您选择选项 a 和 b
2. 您搜索 c
3. 您选择选项 c

现在 selectedValues 只包含 c； a和b消失了。我想我可以循环所有 values 并隐藏那些不属于 hiddenValues 的值，这样它们仍然是 DOM 的一部分，但为什么会发生这种情况，有没有更简单的方法来处理这个问题？

Answer 1

发生这种情况是因为 bind:group 只会考虑实际渲染的输入，正如您所说，一种选择是循环所有值并使用一些 css 来隐藏不可见的值。

另一种选择是自己处理绑定(bind)。

<script>
 let chosenValues = []
 function handleChange(ev) {
   const { checked, value } = ev.target
   if (checked) {
     chosenValues = [...chosenValues, value]
   } else {
     chosenValues = chosenValues.filter(v => v !== value)
   }
 }
</script>

{#each ....}
  <input {value} checked={chosenValues.includes(value)} on:change={handleChange}>
{/each}