在带有 Svelte 的每个块中使用定义的变量答案

【问题标题】：Using defined variable in Each block with Svelte在带有 Svelte 的每个块中使用定义的变量
【发布时间】：2021-07-03 15:47:50
【问题描述】：

我在使用嵌套文件更新变量时遇到了一点麻烦。我的期望是当复选标记为checked 时，变量switchTouch 会更新。我显然做错了什么，因为事实并非如此。欢迎任何指点：

<script>
    import Control from './Control.svelte'
    
    let switchTouch = false
    let switchScreen = true
    
     let controls = [
    { id: 1, title: 'Touch Targets', checked: switchTouch },
    { id: 2, title: 'Screen Reader', checked: switchScreen }
  ];
    
$: console.log(switchTouch)

</script>

{#each controls as control}
<Control title={control.title} bind:value={control.checked} />          
{/each}

REPL 用于更详细的示例

【问题讨论】：

标签： svelte

【解决方案1】：

您的代码中的控件已更新，我相信您希望看到 App.svelte 中的组件更改，您可以通过导出变量并使用 afterUpdate 生命周期来发送更改来做到这一点。我写了一个小sn-p，这将是有用的检查REPL

【讨论】：

【解决方案2】：

您的代码的第一个问题是您绑定的是value 而不是checked

<Control title={control.title} bind:value={control.checked} />

应该是

<Control title={control.title} bind:checked={control.checked} />

第二个是您的代码将控件的初始值设置为 switchTouch 但这只是一个分配，您的代码中没有任何地方创建链接 back switchTouch 的控件。然而，这可以使用响应式语句轻松解决：

$: switchTouch = controls[0].checked

这将在每次第一个控件的 checked 属性更改时更新switchTouch，从而有效地创建两个变量之间的链接。

【讨论】：