Svelte 如何检查数组中的更改绑定到复选框组

Question

我需要了解使用 svelte 才能执行功能，每次都选中复选框组。我正在使用长度数组属性，但它不能正常工作。有什么好的方法吗？

我的代码：

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

let selection = ["b"];
$: console.log("selection: ", selection);
$: if (selection.length > 0) {
    alert('length is more than 0');
}
</script>

<label><input type="checkbox" bind:group={selection} value={"a"} /> a</label>
<label><input type="checkbox" bind:group={selection} value={"b"} /> b</label>
<label><input type="checkbox" bind:group={selection} value={"c"} /> c</label>

或在此REPL

中测试

Answer 1

根据原文post的评论回答：

I'm looking for a better way than selection.length > 0 to detect when array selection has changed, if is possible.

当您在 Svelte 中使用 $: 绑定时，“top-level”语句中的任何变量更改都会更新。

每当 selection 的值发生变化时，这将发出警报：

$: alert(`new selection ${selection}`);

Svelte 如何检查数组中的更改绑定到复选框组

Sevlte how to check changes in array bind to checkbox group

arrays

svelte