Доступ к значению Store внутри цикла в SvelteJS v3

Я строю приборную панель из массива объектов, которые имеют 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

1 ответ

Решение

В настоящее время это невозможно - существует проблема для "контекстных магазинов" ( # 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 как предполагалось.

Другие вопросы по тегам