Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Why is needed for the nested object to be displayed if is present?

$
0
0

This question is in reference to

Pass in a slot to a recursive component

REPL

App.svelte

<script>    import Tree from './Tree.svelte';    const items = [        {            type: 'person', first: 'Maru', last: 'Doe',            children: [                { type: 'person', first: 'Pochi', last: 'Doe' },                { type: 'person', first: 'Tama', last: 'Doe' },                { type: 'thing', manufacturer: 'ACME', product: 'missiles' },            ]        }    ]</script><Tree {items} let:item>    {#if item.type == 'person'}        {item.last}, {item.first}    {:else if item.type == 'thing'}        {item.product} ({item.manufacturer})    {/if}</Tree>

Tree.svelte

<script>    export let items;    export let level = 0;</script><div style:margin-left="{level * 20}px">    {#each items as item}        {(console.log({item}),'')}  ---> all items are shown here<slot item={item} /><svelte:self items={item.children ?? []} level={level + 1}                                 let:item={child}><slot item={child} /></svelte:self>    {/each}</div>

In Tree.svelte, if we remove <slot item={child} /> only the parent item is shown i.e. Maru Doe.

But we have the following line(in Tree.svelte) <slot item={item} /> and if we console print item we get all the items i.e. Pochi, Tama, ACME. Should <slot item={item} /> not pass item to the parent (App.svelte) for the items to be printed in each recursion?

So, why are these not displayed when removing <slot item={child} />?When is <slot item={child} /> called? Is it like this, svelte:self calls itself recursively and when the last child object is reached, <slot item={child} /> is called?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>