I am currently working on targeting nested JSON using svelte:self but I have run into an issue. Whenever I try to add new entries to the JSON, they end up getting deleted if they are positioned lower in the JSON structure. You can take a look at this example REPL that showcases the problem with the svelte:self demo. It seems like there is something missing in how I have designated where to insert new entries in 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>