Svelte Recursive Component events

Question

So I currently have a svelte tree view in which the data for the parent component is being fetched from API at first, and then any other child element is pulled from the parent's id.

parent.svelte

const let projects = [] \\ being fetch through API
{#each project as project}
    <TreeView children={project}>
{/each}

TreeView.svelte

export let children = '';
{#if expanded}
    {#await pull_all_children(project.id)}
        <p>Loading</p>
    {:then children}
        {#each children as child}
            <svelte:self children={child}/>
        {/each}
    {/await}
{/if}

The tree view looks good so far, and im getting the tree, but I want to be able to click on a child and return to the root.

So something like this root->child1->child3, can anyone guide me on what steps I should take to achieve this? Also, if you see some fix on my logic above, im all ears.

What exactly do you mean by "return to the root"?

Corrl
– Corrl

2022-09-07 06:02:31 +00:00
Commented Sep 7, 2022 at 6:02 — Corrl
– Corrl, Commented Sep 7, 2022 at 6:02
@Corrl Like finding its way back to its original parent.

WillyV
– WillyV

2022-09-07 20:44:46 +00:00
Commented Sep 7, 2022 at 20:44 — WillyV
– WillyV, Commented Sep 7, 2022 at 20:44

Stephane Vanraes · Accepted Answer · 2022-09-07 05:28:30Z

3

Assuming you have a button somewhere in the child, you could fire a custom event from it:

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  function handleClick() {
    dispatch('activate', {
      // any data you want to pass, maybe an id ?
    });
  }
 </script>

<button on:click={handleClick}>Click here</button>

Then you can listen to this event with on:activate in the root:

<Treeview children={project} on:activate={doSomething} />

Finally, to keep passing it 'upwards' you can use the concept that an event handler without handler is passed on to the parent, so in Treeview you would get this:

<svelte:self children={child} on:activate />

As a final note, the data passed in from the beginning is available on ev.detail in your final handler

function doSomething(ev) {
  const id = ev.detail.id; // if you passed an id
}

answered Sep 7, 2022 at 5:28

Stephane Vanraes

16.5k3 gold badges35 silver badges51 bronze badges

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

3 Comments

WillyV Over a year ago

This worked nice and is in the right direction. The thing is when clicking a child im only getting the child id or child name. How can I get every child it went through? I need a way to backtrack from child through all the parents not just get the child.

Stephane Vanraes Over a year ago

you would handle the event in the component itself, add the id to the existing 'details' object and raise the event again

Nicholas Mordecai Over a year ago

Worked like a charm! I had it all but was missing passing the handler through the recursive child call. Thanks!

Collectives™ on Stack Overflow

Svelte Recursive Component events

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related