Svelte 单选按钮绑定未正确反映

Question

我有一个带有以下代码的 svelte 组件：

<script>
  let languages = [];
  let defaultLanguage = null;
    
  $: console.log(languages, defaultLanguage);
</script>

<p>Languages:</p>
<div>
  <input type="checkbox" bind:group={languages} value="English"> English
</div>
<div>
  <input type="checkbox" bind:group={languages} value="Swedish"> Swedish
</div>

<p>Default:</p>
{#each languages as lang}
  <div>
    <input type="radio" bind:group={defaultLanguage} value={lang}> {lang}
  </div>
{/each}

当我执行以下操作时出现问题：

选中两个复选框
Select 第二个单选按钮（瑞典语）
取消选中第一个复选框（英文）

这会删除英语单选按钮，但也会取消select瑞典语单选按钮。但是，defaultLanguage 变量仍设置为正确的“Swedish”。如果我再次选中第一个复选框，那么瑞典语单选按钮将再次 selected。

如果我改为 select 步骤 (2) 中的英语单选按钮并取消选中步骤 (3) 中的瑞典语复选框，则不会发生这种情况。

Answer 1

发生这种情况是因为单选按钮的每个块不是“键控每个块”>> the tutorial lesson

如果您知道语言名称是唯一的，您可以简单地使用该语言作为键 >> REPL

{#each languages as lang (lang)}
  <div>
    <input type="radio" bind:group={defaultLanguage} value={lang}> {lang}
  </div>
{/each}

Svelte 单选按钮绑定未正确反映

Svelte radio button binding is not reflected correctly

svelte