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

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。

出现问题如下：

你select选项a和b
你搜索c
你select选项c

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

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

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

Svelte: grouped checkbox binding problem when showing and hiding checkboxes

svelte

svelte-3