0

So, I'm rendering lightning inputs in a for each template, like this:

<template for:each={sfItem.item_variations} for:item="variation">
    <lightning-input key={variation.id} label="Stock"></lightning-input>
    <p key={variation.id}>Actual: {variation.available_quantity}</p>
</template>

So, 'sfItem' is an object i'm getting from apex, with its properties. One of them is 'item_variations' which is an array of objects, each one is a variation. What I want to do, is for each variation in an sfItem, render inputs to modify one of the properties of the variations. So, if there are 3 variations in an item, three different inputs will render and I should be able to modify one, two or three values.

My question is, how do I identify which variation i'm changing? So on the onchange I can capture the value and then assign it to the corresponding variation

1

You can use "for:index" to track the index value of each iteration and assign that index to "Name" Attribute in Lightning-input and can fetch its value in onchange event to know which variation you are changing you can do it like this

HTML

<template for:each={sfItem.item_variations} for:item="variation" for:index="index">
    
            <lightning-input type="text"
                    key={variation.id} label="Stock"
                     name={index}
                     onchange={changed}
                     >
    </lightning-input>

 
</template>

In JS you can fetch the index which will tell you which variation was changed and do whatever you want with it JS

 changed(evt){
  console.log(evt.target.name); 
 }
1
  • Thanks a lot! I knew there was something to track each iteration, if not it would be very hard or impossible to retrieve each individual value. Feb 12 '21 at 18:50
3

You can assign the ID to any sort of attribute, and read that in the event:

<lightning-input key={variation.id} data-id={variation.id} label="Stock"></lightning-input>

...

onChangeHandler(event) {
  sfItem.item_variations
    .find(iv => iv.id === event.target.dataset.id).available_quantity = event.target.value;
}

The point is that you can attach your own data to the component instead of using name, which may be necessary for some types of inputs (e.g. radio boxes in a group).

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.