Append some string in {item.Id} in LWC

Question

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>

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

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?

Answer 1

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 {
         ...question,
         uniqueName: question.Id + 'Somevalue'
    }
})

Answer 2

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.