主页 / user-745758

Manny's questions

Martin Hope
Manny
Asked: 2025-02-13 22:15:01 +0800 CST
  • 5

我有三个文件：

App.svelte：

<script>
    import Component from "./Component.svelte"
    import { items } from "./store.js"
    
    $items.set("a", { name: "John", index: "a" })
    $items.set("b", { name: "Jack", index: "b" })
</script>

<h1>DIV each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div>Name: {item.name}</div>
    {/each}
{/if}

<h1>Component each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div><Component index={item.index} /></div>
    {/each}
{/if}

Component.svelte：

<script>
    import { items } from "./store.js"
    let { index = null } = $props()
    
    let data = $state($items.get(index))
</script>

<div><input bind:value={data.name} /></div>

store.js：

import { writable } from "svelte/store";
import { SvelteMap } from "svelte/reactivity";

export let items = writable(new SvelteMap([]))

我想知道如何在 SvelteMap 中保持反应性items。当输入值发生变化时，它应该在 SvelteMap 中更新（因为它已绑定）。我不知道如何处理这种反应性。

这里有游乐场。

javascript
Martin Hope
Manny
Asked: 2025-02-13 15:19:19 +0800 CST
  • 5

我有一个简单的存储new Map()，我喜欢在 Svelte 组件中对其进行迭代。在 {#each} 块中，我可以看到它迭代的次数与 Map 中的元素数一样多，但我看不到值。

<script>
    import {items} from "./store.js"

    $items.set("one", { name: "John", age: 50 })
    $items.set("two", { name: "Jack", age: 25 })
</script>

<h1>Hello!</h1>
{#each $items as item}
    <div>name: {item.name}</div>
{/each}

// store.js
import {writable, get} from "svelte/store"

export let items = writable(new Map())

游乐场。

javascript