How can we properly access the DOM element generated by an {#each} loop in Svelte when it is clicked?

Question

How can we properly access the DOM element generated by an {#each} loop in Svelte when it is clicked?

Using Svelte's {#each} functionality, I am reactively loading elements in the following way:

{#each $items as item}
    <div>
       <Button on:click={someFunction}>{item.text}</Button> (*)
    </div>
{/each}

(*) a component that forwards its on:click

I am trying to find a way to reference the actual DOM element when calling someFunction by clicking on the created item. Passing the index of the array item to the function does not provide me with a reference to the unique DOM element. How can this be achieved?

Here are the approaches I have attempted so far:

```
on:click={() => someFunction(this)}
```
→ results in undefined
```
on:click={(el) => someFunction(el)}
```
→ results in undefined
```
on:click={(e) => someFunction(e)}
```
→ using e.target returns the clicked button, but accessing the div would require .parentElement, which doesn't seem very Svelte-like.
on:click={someFunction} combined with bind:this={anItem} → only returns the last created element in the {#each} block.

javascript svelte

Answer 1

Answer №1

If you're looking to isolate the parent division, one way to do it in a simple and basic manner would be to utilize an Array setup such as this:

<script>
   let itemsElements = [];
   const someFunction = (i) => console.log(itemsElements[i]); // <- this is your div
</script>
{#each $items as item, i}
    <div bind:this={itemsElements[i]}>
       <Button on:click={() => someFunction(i)}>{item.text}</Button>
    </div>
{/each}

A more sophisticated approach would involve enclosing <Button> within a higher-level component and extracting the reference from there, using techniques like the context API or a slotted prop.

Answer 2

If you're looking to isolate the parent division, one way to do it in a simple and basic manner would be to utilize an Array setup such as this:

<script>
   let itemsElements = [];
   const someFunction = (i) => console.log(itemsElements[i]); // <- this is your div
</script>
{#each $items as item, i}
    <div bind:this={itemsElements[i]}>
       <Button on:click={() => someFunction(i)}>{item.text}</Button>
    </div>
{/each}

A more sophisticated approach would involve enclosing <Button> within a higher-level component and extracting the reference from there, using techniques like the context API or a slotted prop.

Answer 3

Answer №2

The issue at hand involves a button within a modal that needs to have the ability to open and close. When clicked, the goal is for it to toggle the "open" class. However, using the class directive causes all buttons/modals generated by {#each} to toggle simultaneously.

This suggests that the incorrect property is being utilized. If there are multiple objects, the state needs to be stored per item, and then used for the class directive.

For example:

{#each $items as item}
    <div>
       <Button on:click={someFunction}>{item.text}</Button>
       <div class="modal" class:open={item.show}>...</div>
    </div>
{/each}

Alternatively, the state can be stored in a separate list or dictionary. It's also possible to extract the content of the {#each} to a component with a local state variable specifically for the open state.

Answer 4

The issue at hand involves a button within a modal that needs to have the ability to open and close. When clicked, the goal is for it to toggle the "open" class. However, using the class directive causes all buttons/modals generated by {#each} to toggle simultaneously.

This suggests that the incorrect property is being utilized. If there are multiple objects, the state needs to be stored per item, and then used for the class directive.

For example:

{#each $items as item}
    <div>
       <Button on:click={someFunction}>{item.text}</Button>
       <div class="modal" class:open={item.show}>...</div>
    </div>
{/each}

Alternatively, the state can be stored in a separate list or dictionary. It's also possible to extract the content of the {#each} to a component with a local state variable specifically for the open state.

How can we properly access the DOM element generated by an {#each} loop in Svelte when it is clicked?

Answer №1

Answer №2

Similar questions

What is the best way to connect a text box to a nested object in the state of a React component?

Is there a way to decode/compile/interpret the data within nested HTML tags within my AngularJS directives?

Gathering information from a website where the URL remains constant even after clicking on a specific button

Sending personalized list attributes through JSON to JavaScript in ASP.NET

Please ensure that all files have finished downloading before proceeding to create the object

What are the steps to ensure the effective functioning of my checkbox filter?

Text element in SVG not displaying title tooltip

Automatically compile files while performing an npm install or update

What is the best way to swap the values of options between two input select elements?

Frontend update: Changing the display format for dates

The Bootstrap navigation menu is functioning properly when opening, but has an issue when attempting

A guide to sorting an object with integer keys by its values using JavaScript

Click on the React JS infinite render component to load more items

What is the recommended way to configure the build.gradle file for the app build process?

Obtain the AJAX response in separate div elements depending on whether it is successful or an error

Trigger the scrolling of one div when another div is scrolled

What's the reason Rails is not recognizing relative JavaScript files?

Engage with React JS arrays of objects

Will the .replaceWith() method alter the code visible to search engines?

Is it possible to invoke an AngularJs service by clicking a button?