How to concatenate a value inside of the href property on lwc [duplicate]

Question

This question already has an answer here:

• Expression Functions for Lightning Web Components 3 answers

I have the following code and I need to insert a '/' in my href property.

<template for:each={assetData} for:item="item" for:index="indexvar">
   <tr class="slds-hint-parent" key={item.Id}>
      <td>
         {item.Name}
      </td>
      <td>
         <a href={item.Id} target="_blank">{item.Account.Name}</a>
      </td>
   </tr>
</template>

On aura component, I can easily do something like

<a href="{!'/' + item.Id}" target="_blank">{!item.Account.Name}</a>

But lwc does not allow me to do the same.

Answer 1

LWCs Templates are logicless and don`t support any Expressions anymore (see also here/here)

The engine doesn’t allow computed expressions

In your case you should either add a new computed property to your items in your assetData at runtime or create a child component (passing the id) which internally uses a getter or tracked variable which builds the link