4

I'm iterating through the list of objects, i want to render the class name based on the one attribute from the object. Here is my sample js:

<template for:each={tempList} for:item="tempItem">
    <div key={tempItem.label}>
        <span class={testMethod.isActive} >
            {tempItem.label}
        </span>
    </div>
</template>
3
  • Hi, could you clarify your question? Which method and which parameter do you want to pass attributes to?
    – POZ
    Feb 8, 2019 at 10:53
  • If you give your expected output html and a sample tempList that would help! Feb 8, 2019 at 11:24
  • Good question. I'd phrase it as how to access the current template for:each item in a JavaScript get.
    – Keith C
    Feb 8, 2019 at 11:24

2 Answers 2

2

You could define a getter that processes the list and adds additional data:

export default class Foo extends LightningElement {
  ...

  @track
  activeIndex = 0;

  get processedList() {
    return this.tempList.map((item, index) => {
      const { label } = item;
      const computedClass = index === this.activeIndex ? 'active' : '';
      return {
        label,
        computedClass,
      };
    });
  }
}
<template for:each={processedList} for:item="item">
  <div key={item.label}>
    <span class={item.computedClass}>{item.label}</span>
  </div>
</template>
1
  • 4
    This is a good answer, I'd also point out that LWCs are the dark ages of software development. Not being able to use expressions in templates is a terrible design choice
    – Andy Ray
    Feb 1, 2021 at 19:26
0

My guess - didn't find anything by Googling - is that it is probably simplest to add the data value you need to the list items themselves in the JavaScript that loads the data:

let tempItem = ...;
tempItem._class = '...';

so as to sidestep the problem:

<template for:each={tempList} for:item="tempItem">
    <div class={tempItem._class}>
        ...

But would like to know what other approaches are available.

PS This HTML Template Directives documentation talks about for:item

injects into the current scope

but doesn't explain whether "scope" is something accessible from the JavaScript or not.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .