Svelte：显示和隐藏复选框时的分组复选框绑定问题答案

【问题标题】：Svelte: grouped checkbox binding problem when showing and hiding checkboxesSvelte：显示和隐藏复选框时的分组复选框绑定问题
【发布时间】：2021-12-16 12:30:21
【问题描述】：

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

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

问题发生如下：

您选择选项 a 和 b
你搜索 c
您选择选项 c

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

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

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

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

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

【讨论】：