lwcでのgetters/settersは、@apiをつけることで省略できる。
しかし、set時やget時に初期処理や加工して保存したいときなどは、コード量が増えるが分けて書く必要ある。
参考:
<!-- 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;
}
以上
この記事へのコメント
コメントはまだありません。