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 for:each={pills} for:item="item">


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.


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.