LWC_Lightning-pillの動作(削除など)

LWCのLightning-pillの削除などの動作のLWCだよ！
検索などで使用するよね！

以下、完全サンプルコード！

pill.html

<template>
    <template for:each={labelItems} for:item="pillItem" for:index="index">
        <lightning-pill label={pillItem.label} onremove={removePillItem} key={pillItem.label} name={index}></lightning-pill>
    </template>
</template>

pill.js

import { LightningElement } from 'lwc';

export default class Basic extends LightningElement {
    labelItems = [
        {
            label: 'Pill 1'
        }, 
        {
            label: 'Pill 2'
        }, 
        {
            label: 'Pill 3'
        },
        {
            label: 'Pill 4'
        }
    ];

    removePillItem(event) {
        // `name` 属性を使用してピルのインデックスを取得
        const pillIndex = event.detail.name;
        // ピルアイテムを削除
        this.labelItems.splice(pillIndex, 1);       
        // スプレッド演算子を使用して配列を更新
        this.labelItems = [...this.labelItems];
    }
}

実行結果

初期表示:

Salesforce LWC、Aura Lightning、Integration、W3web Tutorial の4つのピルが並んで表示されてるよ！

いずれかのピルの “X” アイコンをクリックすると、onremove イベントが発生し、removePillItem メソッドが呼ばれて･･･

removePillItem で、該当ピルを配列から削除し、配列を更新して削除したピルが画面上から消えるよん！

HTML解説

template for:each={labelItems} for:item="pillItem" for:index="index"

labelItems という配列をループさせ、それぞれを pillItem という変数として扱う
for:index でループの順番 (0, 1, 2, … ) を取得し、 index として使用

lightning-pill label={pillItem.label} onremove={removePillItem} key={pillItem.label} name={index}

label 属性にはピルに表示する文字列（pillItem.label）をセット
onremove 属性には削除イベント（ユーザがピルを消そうとしたとき）をハンドリングするメソッド removePillItem を指定
key はループで使われる一意な値で、ここでは単純にピルのラベルを使用
name={index} は、削除する際にどのピルが押されたかを識別するため、0, 1, 2,... のインデックスをセット

JavaScript解説

labelItems (初期配列)

ピルとして表示したい文字列を持つオブジェクトの配列

removePillItem(event)

event.detail.name:
lightning-pill で name={index} を指定したことで、削除イベント (onremove) には event.detail.name としてインデックス番号が渡ってきます。

this.labelItems.splice(pillIndex, 1):
labelItems 配列から、pillIndex 番目の要素を 1件削除。

this.labelItems = [...this.labelItems]:
配列をスプレッド構文でコピーし、新しい配列 として代入し直す。

ポイント:
ただ splice で削除しただけでは、JavaScript的には同じ配列インスタンスを操作したことになるため、LWC が再レンダリングを検知しない場合があるよ。
そこで配列をコピーして代入し直すことで、変更を検知→再描画 のトリガーになるよ！