1. 목적

LWC에서 루프 돌리는 방법은 <template for:eatch={items} for:item="item" for:index="idx"> 입니다만, 단 태그 중에는 <template if:true> 로 인덱스를 판단할 수 없기 때문에, 이번 <template for:eatch={items} for:item="item" for:index="idx"> 로 루프 돌리는 동안에 인덱스를 판단하는 방법을 소개하려고 생각합니다.

2. 소스 구성도

lwc
 ├─groupButton
 └─groupButtonContainer

groupButton

groupButton.html

<template>
    <div class="slds-button-group" role="group">
        <template for:each={buttonList} for:item='item' for:index='index'>
            {getIndex}
            <template if:true={isActive}>
                <button key={item.id} class="slds-button slds-button_brand" onclick={onClickHandler}
                    name={item.value}>{item.value}
                </button>
            </template>
            <template if:false={isActive}>
                <button key={item.id} class="slds-button slds-button_neutral" onclick={onClickHandler}
                    name={item.value}>{item.value}
                </button>
            </template>
        </template>
    </div>
</template>

groupButton.js

import { LightningElement, api } from 'lwc';

export default class GroupButton extends LightningElement {
    //インデックス
    @api activeIndex;
    //ボタンリスト
    @api buttonList;
    //インデックス初期化
    id = -1;

    /**
     * インデックス取得
     */
    get getIndex() {
        this.id++;
    }

    /**
     * アクティブかを判断する
     */
    get isActive(){
        return Number(this.activeIndex) === this.id;
    }

    /**
     * グループボタン押下
     * @param {*} event 
     */
    onClickHandler(event) {
        let target = event.target;
        let clickedButton = this.template.querySelector('.slds-button_brand');
        clickedButton.classList.remove('slds-button_brand');
        clickedButton.classList.add('slds-button_neutral');
        target.classList.remove('slds-button_neutral');
        target.classList.add('slds-button_brand');
        // debugger;
        this.dispatchEvent(new CustomEvent('select', {
            detail: target.name
        }));
    }
}

groupButton.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

groupButtonContainer

groupButtonContainer.html

<template>
    <div class="slds-card" style="height: 300px;width:1200px">
        <c-group-button button-list={buttonList} active-index="1"></c-group-button>
    </div>
</template>

groupButtonContainer.js

import { LightningElement } from 'lwc';

export default class GroupButtonContainer extends LightningElement {
    buttonList = [{
        id: 0,
        value: 'ボタン1'
    },
    {
        id: 1,
        value: 'ボタン2'
    },
    {
        id: 2,
        value: 'ボタン3'
    },
    {
        id: 3,
        value: 'ボタン4'
    },
    {
        id: 4,
        value: 'ボタン5'
    }]
}

groupButtonContainer.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

3. 로칼로 동작 확인

groupButtonContainern을 마우스 오른쪽 버튼으로 클릭하고 SFDX:Preview Component Locally Use Desktop Browser 선택하기

서버를 시작하고 브라우저를 자동으로 엽니다.