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

Posted 2023-03-07

【中文标题】在带有 Svelte 的每个块中使用定义的变量

【英文标题】：Using defined variable in Each block with 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 用于更详细的示例

【参考方案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，从而有效地创建两个变量之间的链接。