Adding to nested JSON using svelte:self?

Question

I'm trying to target nested JSON using svelte:self and encountering an issue where adding to the JSON will result in any newly added entries being deleted if they occur lower down the tree in the JSON structure. Here's an example REPL using the svelte:self demo. I'm clearly missing something with how I've specified where to add within the 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>

looks like a closure issue. You should use references to a single root tree so that all the buttons mutate the same object, either store or context — pilchard
– pilchard, Commented Nov 2, 2021 at 17:57

Corrl · Accepted Answer · 2021-11-02 18:50:20Z

1

Instead of spreading the props in <svelte:self {...file}> setting them seperately and adding 'bind:' to the files there and in the main <Folder ..> tag seems to solve the unwanted deletions -> [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}/>

answered Nov 2, 2021 at 18:50

Corrl

7,9311 gold badge21 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding to nested JSON using svelte:self?

1 Answer 1

App.svelte

Folder.svelte

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

App.svelte

Folder.svelte

Comments

Your Answer

Sign up or log in

Post as a guest

Related