时间戳

首页 > 解决方案 > 在 SvelteJS v3 中的循环内访问 Store 的值

svelte - 在 SvelteJS v3 中的循环内访问 Store 的值

问题描述

我正在从一组具有store其某些属性的对象构建仪表板。每个商店都从不同的来源独立更新。

我的问题是我无法读取循环store内的值。each

为了简化以下代码示例，我使用tweened而不是store

以下代码也可用于 Svlete REPL https://svelte.dev/repl/9a17102e7d32471a940ba007e5b56db0?version=3.6.7

<script>
    import { tweened } from 'svelte/motion';

    const data = [{
        label: 'one',
        value: tweened(0)
    }, {
        label: 'two',
        value: tweened(0)
    }]

</script>

<ul>
    {#each data as item}
        <li>{item.label} ({item.$value})</li>
    {/each}
</ul>

部分{item.$value}返回undefined

标签： sveltesvelte-store

解决方案

目前这是不可能的——“上下文商店”（#2016）存在一个问题，它可以让你做这种事情......

<ul>
  {#each data as { label, value }}
    <li>{label} ({$value})</li>
  {/each}
</ul>

...但我们还没有。同时，解决方法是将商店传递给组件：

<ul>
  {#each data as item}
    <ListItem label={item.label} value={item.value}/>
  {/each}
</ul>

在组件内部，您将拥有export let label, value，并且可以$value按预期使用。

推荐阅读