get a particular element in web component iteration

Question

I want actually to be able to get an attribute on a particular item in the web component iteration, but cannot get it to work.

Look for instance the following code :

<template>
    <template for:each={pills} for:item="item">

       <lightning-pill 
               key={item} 
               label={item.label} 
               value={item.value} 
               onremove={handleRemove}>
        </lightning-pill>
    </template>    
</template>

When I clicked on the delete button on one particular pill in the list, I'm calling the method handleRemove for this item, but in my js I cannot get the reference to the particular item. Here is my js code :

 handleRemove (event) {
    // eslint-disable-next-line no-console
    console.log('## set the value in the list :',event);
    // eslint-disable-next-line no-console
    console.log('## detail:',JSON.stringify(event.detail));
    // eslint-disable-next-line no-console
    console.log('## item:',event.detail.item);      

}

The event.detail attribute is null. The event.target attribute also is null.

I don't know which attribute will return me the value or label of the selected pill.

Answer 1

You can't reference component properties that are not available or don't exist

for example:

event.target.label will work,

event.target.value will not.

you can find a reference of available properties in the documentation