Accessing a specific component rendered in a for each template

Question

I'm rendering items (custom lwc component) in a for each template:

<template if:true={items.data}>
        <template for:each={items.data} for:item="item">
            <c-lwc-item
                key={item.id}
                sf-id={item.id}
                onsf_item_loaded={handleLoad}>
            </c-lwc-item>
        </template>
</template>

The 'sf_item_loaded' is a custom event dispatched by that component.

I'd like, in the handleLoad method triggered in the onsf_item_loaded, to access the c-lwc-item that dispatched that event. Is that possible? I want to do it so that I can call a method from that component.

Answer 1

You can get that component using the .target property of the event.

handleLoad(event) {
    let target = event.target;
    console.log('target ' + target);
    // you can access the function or any property using that like
    target.someFunction();
}