Lightning Web Component @track デコレータでオブジェクトを扱う
環境
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;
}
}
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;
}
}
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>
<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>
<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>