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

2 Answers 2

2

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, 2021 at 18:50
4

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).

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .