使用 svelte:self 添加到嵌套 JSON？

Question

我正在尝试使用 svelte:self 定位嵌套 JSON 并遇到一个问题，即添加到 JSON 将导致任何新添加的条目在较低位置出现时被删除JSON 结构中的树。这是使用 svelte:self 演示的 example REPL。我在 JSON?

中指定添加位置的方式显然遗漏了一些内容

<script>
let files = [
  {
    name: 'entry 1',
    files: [
      { 
        name: 'nested entry' 
      }
    ]
  },        
  { 
    name: 'entry 2' 
  }
];

function add() {
  files = files.concat({name: 'new item'})
}
</script>

<ul>
{#each files as file}
<li>
  {#if file.files}
    <svelte:self {...file}/>
  {:else}
    <File {...file}/>
  {/if}
</li>
{/each}
<li>
  <button on:click={() => add()}>new</button>
</li>
</ul>

Answer 1

而不是在 <svelte:self {...file}> 中单独设置它们并将 'bind:' 添加到那里的文件和主要 <Folder ..> 标签中似乎解决了不需要的删除 -> [REPL ] (https://svelte.dev/repl/dfc42f18f777472bb2b1033f6b077c67?version=3.44.1)

App.svelte

<Folder name="Home" bind:files={root} expanded/>

Folder.svelte

<svelte:self name={file.name} bind:files={file.files}/>

使用 svelte:self 添加到嵌套 JSON？

Adding to nested JSON using svelte:self?

javascript

recursion

json

svelte

svelte-3

App.svelte

Folder.svelte