Lightning Web Component @track デコレータでオブジェクトを扱う

2023年8月9日

環境
Salesforce

書式
@track
オブジェクト変数名 = {属性名：値}
オブジェクトのプロパティまたは配列の要素の変更を監視するようにフレームワークに指示するには、項目を @track でデコレートします。
Spring’20 の更新以降は、@track をつけなくても、再描画がされるようになっています。
しかし、オブジェクトや配列の子要素に変更を加えた場合の再描画は、@track を付けないと行われません。

操作例
1.JavaScriptファイルUser.js

import { LightningElement, track } from 'lwc';
export default class User extends LightningElement {
    @track
    stuObj = {
        name : '品川 太郎',
        age : 21
    };
    handleChange = function(e){
        this.stuObj.age = e.target.value;
    }
}

2.htmlファイルUser.html
<!– User.html –>

<template>
    <lightning-card class="slds-m-around_small">
        <div class="slds-box">
            <p>name : {stuObj.name}</p>
            <p>age : {stuObj.age}</p>
        </div>

        <form>
            <lightning-input type="number" default=20 onchange={handleChange}>
            </lightning-input>
        </form>
    </lightning-card>
</template>