LWC for:each issue in rendering list. Cannot use calculated id

Question

I am trying hands on in lwc . Got stuck while I want to do something which in aura was like:

<aura:iteration items="{!v.serverResult}" var="item" indexVar="i"> 
  <li role="presentation" class="slds-listbox__item" data-selectedIndex="{#i}" onclick="{!c.itemSelected}">
    <span id="{#'listbox-option-unique-id-'+i+1}" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
      <span class="slds-media__figure optionIcon">
        <span class="slds-icon_container">
          <span class="slds-assistive-text">{#v.objectName}</span>
        </span>
      </span>
      <span class="slds-media__body singleRow">
        <span class="optionTitle slds-listbox__option-text slds-listbox__option-text_entity">{#item.text}</span>
      </span>
    </span>
  </li>
</aura:iteration>

Anyone can help me how to replace data-selectedindex in lwc . Also what can i use to create an id just like in span of aura . As i came to know i cannot have expression or evaluation in lwc for same. how can i do span id="{#'listbox-option-unique-id-'+i+1}" in lwc.

Answer 1

You can either choose to use an existing value (e.g. the record Id):

data-record-id={item.Id}

Or you can add in your own:

@wire(...)
wireHandler({data,error}) {
  if(data) {
    this.serverResult = data.map((record,index)=>({...record, index: `${index}`}));
  }
  if(error) {
    // do error handling
  }
}