【Lightning Web Component】comboboxを試してみました

Developer

2020.07.13 2020.07.05

この記事は約4分で読めます。

こんにちは、アンダーソンです。
今回はlightning-comboboxを実装してみました。
LWCのスーパーバッチで初めて使ったので使い方をまとめておこうと思います。

Contents

1 lightning-comboboxの使い方
2 Apexから取得した値をセットする

lightning-comboboxの使い方

lightning-comboboxは見た目が下記のようなものになります。

いわゆる選択リストです。
まず公式のドキュメントに載っているやり方で、
これを作ってみると、下記のようなコードになります。

<template>
    <lightning-combobox
            name="progress"
            label="Status"
            value={value}
            placeholder="Select Progress"
            options={options}
            onchange={handleChange} ></lightning-combobox>

    <p>Selected value is: {value}</p>
</template>

import { LightningElement } from 'lwc';

export default class ComboboxBasic extends LightningElement {
    value = 'inProgress';

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    handleChange(event) {
        this.value = event.detail.value;
    }
}

これでもOKなんですが、これだと動的に値を取得できないという難点が残ります。
LWCのスーパーバッチでは、あるオブジェクトが種別を表しており、
そこにぶら下がる形で別のオブジェクトがあるというものでした。

すなわち、種別が増えたら増える必要があります。
これあたりまえに要件としてあると思いますし、
増えるたびにコードを編集するのはめんどくさいので
動的に設置したいところですよね。

Apexから取得した値をセットする

上記を解決するために、Apexで取得した値を選択リストとして使うことができます。

まず、Apexでレコードを取得するメソッドを用意します。

    @AuraEnabled(Cacheable=true)
    public static List<Test1__c> getTestName(){
            return [
                SELECT
                 Id,
                 Name
                FROM Test1__c
                order by Name
            ];
    }

次にこれを呼び出した際に選択リストとして用意した、変数にセットしていきます。

    @wire (getTestName)
    testName ({ data, error }) {
        if ( data ) {
            this.selectOptions = data.map(rec => {
                return {
                    label: rec.Name,
                    value: rec.Id
                };
            });
        }
        if ( error ) {
            this.selectOptions = undefined;
            this.error = error;
        }
    }

それをHTML側で表示させるだけになります。