How to get dynamic string value within for:each loop of LWC template [duplicate]

Question

I want to set style attribute value dynamically while looping in template.

But LWC is warning me of this error message.

LWC1060: Template expression doesn't allow CallExpression

Below is my template.

  <template for:each={colors} for:item="color">
    <li key={color} class="slds-color-picker__swatch" role="presentation">
      <a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="0">
        <span class="slds-swatch" style={makeColorStyle(color)}><--! warning here -->
          <span class="slds-assistive-text">{color}</span>
        </span>
      </a>
    </li>
  </template>

How can I achieve my purpose?

Answer 1

While it is possible to use this approach Expression Functions within Lightning Web Components, IMHO the cleaner approach is to have the data values directly on the object that is iterated over.

So in this case, logic could build the array or it could be hardcoded:

@api
get colors() {
    return [
        {name: 'red', style: 'color: "#FF5733"'},
        {name: 'green', style: 'color: "#83FF33"'},
        ...
    ];
}

and then referenced like this:

<template for:each={colors} for:item="color">
    <li key={color.name} ...>
       ....
       <span style={color.style} ...>
       <span ...>{color.name}</span>
       ...
   </li>
</template>

Answer 2

You can either push the calculated value in the array as @keith mentioned. However, in a more complex scenario, you could also create a child component for the iteration item. The child component would then do the processing.