苗条的复选框突然无法选中

Question

下面是重现我的问题(Svelte 3.0.0)的代码。

重现步骤:

1. 单击复选框。(正常行为)
2. 在搜索框中输入一些字符
3. 删除刚才输入的字符。
4. 再次单击复选框。注意，现在它没有效果了。复选框保持空白。

编辑它似乎与这一行有关:

bind:group={selectedVars[schemaVar.name].lts}

如果我硬编码为:

bind:group={selectedVars['bar'].lts}

那么它可以正常工作。

你知道为什么过滤器会破坏复选框吗?

<script>
let schema = {
name: "bar",
vars: [{ name: "X" }],
};
$: availableLTs = ["aaa", "bbb", "ccc", "abc"];
function matchesSearch(searchString, text) {
let query = searchString;
console.log("query is", query);
if (!query) return true;
return text.includes(query);
}
let selectedChart = 'bar';
let selectedVars = {X: { lts: [] }};
$: schemaVars = schema.vars;
let searchString = "";
</script>
<main>
{#each schemaVars as schemaVar}
<h6>
{schemaVar.name}
<input type="text" bind:value={searchString} placeholder="Search..." />
</h6>
{#each availableLTs as ele}
{#if matchesSearch(searchString, ele)}
<div class="form-check">
<label>
<input
type="checkbox"
class="form-check-input"
bind:group={selectedVars[schemaVar.name].lts}
value={ele}
/>
{ele}
</label>
</div>
{/if}
{/each}
{/each}
</main>

Answer 1

问题似乎与嵌套的each循环有关

{#each schemaVars as schemaVar}
...
{#each availableLTs as ele}

...//Checkbox
{/each}
{/each}

可以通过在组件中包装内部循环来解决。

前面的答案几乎解决了问题，但遗漏了一件重要的事情:组件中的each循环不是一个"关键的each block">→

1. 选择第三个复选框'ccc'
2. 'c'过滤器
3. →'ccc'移动到第一个位置，不再被选中

(或者选择'aaa'并过滤'b'…)

这可以通过添加标签文本作为key/id来解决(假设复选框标签是唯一的)->

{#each filteredLTs as ele (ele)}        
...
{/each}

由于问题不是变量设置的方式(…selectedVars[schemaVar.name].lts})，我会尽量保持组件内部的逻辑，并在App.svelte ->组件是通用的，可以很容易地重用REPL

中的示例<编辑>[App.svelte]

<script>
import Checkboxes from './Checkboxes.svelte'

let schema = {
name: "bar",
vars: [{ name: "X" }],
};
let allLTs = ["aaa", "bbb", "ccc", "abc"];
let searchString = "";

$: filteredLTs = allLTs.filter(lt => lt.includes(searchString)) 
let selectedVars = {X: { lts: [] }};

$: console.log(selectedVars.X.lts)

</script>
<main>
{#each schema.vars as schemaVar}
<h6>
{schemaVar.name}
<input type="text" bind:value={searchString} placeholder="Search..." />
</h6>

<div class="form-check">
<Checkboxes checkboxes={filteredLTs} bind:checked={selectedVars[schemaVar.name].lts}/>
</div>
{/each}
</main>

<编辑>[Checkboxes.svelte]

<script>
export let checkboxes, checked  
</script>
{#each checkboxes as checkbox (checkbox)}        
<label>
<input
type="checkbox"
class="form-check-input"
bind:group={checked}
value={checkbox}
/>
{checkbox}
</label>
{/each}

Answer 2

你可以这样解决这个问题

在App.Svelte

<script>
import Checkbox from './Checkbox.svelte';

let schema = {
name: "bar",
vars: [{ name: "X" }],
};
$: availableLTs = ["aaa", "bbb", "ccc", "ABC"];   
$: matchesSearch = availableLTs.filter((elem) =>{ return elem.includes(searchString); })
let selectedChart = 'bar'; 
let selectedVars = {X: { lts: [] }};
$: console.log(selectedVars)
$: schemaVars = schema.vars;
let searchString = "";
</script>
<main>
{#each schemaVars as {name}}
<h6>
{name}
<input type="text" bind:value={searchString} placeholder="Search..." />
</h6>
<Checkbox bind:value={selectedVars} {name} {matchesSearch}/>
{/each}
</main>

复选框。苗条的

<script>
export let value, name, matchesSearch;
</script>
{#each matchesSearch as ele}
<div class="form-check">
<label>
<input
type="checkbox"
class="form-check-input"
bind:group={value[name].lts}
value={ele}
/> 
{ele}
</label>
</div>
{/each}

你可以在这个repl

中检查它