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

【问题标题】：Adding to nested JSON using svelte:self?使用 svelte:self 添加到嵌套 JSON？
【发布时间】：2021-12-17 05:30:57
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

看起来像一个关闭问题。您应该使用对单个 root 树的引用，以便所有按钮都改变同一个对象，store 或 context

标签： javascript json recursion svelte svelte-3

【解决方案1】：

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

App.svelte

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

文件夹.svelte

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

【讨论】：