lwcでのgetters/settersは、@apiをつけることで省略できる。

しかし、set時やget時に初期処理や加工して保存したいときなどは、コード量が増えるが分けて書く必要ある。

参考:

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

<!-- todoItem.html -->
<template>
    {uppercaseItemName}
</template>
// todoItem.js
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    uppercaseItemName;

    @api
    get itemName() {
        return this.uppercaseItemName;
    }

    set itemName(value) {
       this.uppercaseItemName = value.toUpperCase();
    }

}

なお、上記はのように特に処理が必要でなければ、以下のような書き方になる。

<!-- todoItem.html -->
<template>
    {itemName}
</template>
// todoItem.js
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    @api itemName;
}

以上

この記事へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA