Expressions in for:each index value in LWC? [duplicate]

Question

Currently, I am facing an issue is that I want index starting from value "1"

I am using for:each in my code.

<template>
    <lightning-card title="HelloForEach" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact" for:index="index">
                <li key={contact.Id}>
                   {index}  {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

I have added Screenshot Below. I want this {index} starting from value "1" rather than "0" . I have also tried {index+1} but it throws an error .

Here is the Playground link.

Thanks in Advance

Answer 1

Solution 1 - Use plain old html

If you want to render a list in numerical order, starting at any number of your choice, you could use <ol> (ordered list) instead of <ul> (unordered list).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

Solution 2 - Create a child component

Send the index and contact object to a child item and perform any data transformations there. This solution provides you with more control and freedom to style your list items than solution 1.

Create a getter and increment the index value by one.

@api index;

get position() {
    return index + 1;
}

See a working example: Updated Playground

Side note

See the LWC documentation for the rationale for using Javascript to compute values instead of using expressions in the markup like in Aura components.

To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template.

Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_getter

Answer 2

@akiradev provided two viable solutions... Here's a third.

You can loop through your array of contacts and assign them a new property:

this.contacts.forEach((contact, idx) =>{
    contact.number = idx + 1; // Now each contact object will have a property called "number"
});

Now your HTML looks like this:

<li key={contact.Id}>
    {contact.number}  {contact.Name}, {contact.Title}
</li>

Here's a modified Playground Link illustrating this solution. In this example, since you've hard-coded the array of contacts, the forEach loop is inside a connectedCallback() function. In real life, where you're probably getting the data by calling an Apex method, you'll want to perform this processing step on the response data in the function that calls Apex, immediately before assigning it to this.contacts.