I am having two lightning input inside a template and looping through the template and forming n number of lightning input as like below

<template for:each={questions} for:item="item" for:index="index">
 <lightning-input name={item.rowId}  onchange={getPrediction}>

 <lightning-input name={item.rowId} class="inputMil" onchange={getPrediction} >

I need to give different names for the input box like

<lightning-input name={item.rowId} + "FromAdd .....

<lightning-input name={item.rowId} + "ToAdd .....

So that all the fields will have unique name. Is there a way we can achieve this in LWC?


Yes, you can do that, but you can't set that from HTML code. You need to set that from JS controller.

You can do it using a for loop or map function. Also, you can define a custom attribute instead of Id.

this.questions = this.questions.map(question => {
    return {
         uniqueName: question.Id + 'Somevalue'

LWC does not support expressions like that. (here)

The engine doesn’t allow computed expressions. To compute the value of expression, use a getter in the JavaScript class.

You need to do the concatenation in js and then push it to template.

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.