Lightning Web Componentsは片方向バインディング

Lightning Web Componentsで、lightning-inputとデータバインディングするには、以下のようにコードを書きます。

<lightning-input class='quantity-input' max="999" type="number" min="0" style="text-align: right;" value={_orderDetail.Quantity} step={_orderDetail.OrderUnitNumber} onchange={handleChangeQuantity}></lightning-input>

value={_orderDetail.Quantity}のところがデータバインディングしているところです。

Angularなどは、このようにデータをバインディングすると、双方向バインディングになります。つまり、コントール上のデータが変わると、バインディングした変数の値も変わります。

これは結構便利な機能です。

しかし、Lightning Web Componentsは、片方向バインディングです。つまり、コントロールに設定した値は表示するが、コントロールで入力したデータは変数に反映できません。

さらには、親コンポーネントから子コンポーネントにオブジェクトでデータを渡している場合は、子コントロール内からオブジェクト内の値を変更することができません。

例えば、上の例ではデータが変わると、handleChangeQuantityが呼び出されます。このメソッドの中で、以下のように書くとエラーになります。

this._orderDetail.Quantity = event.target.value;

では、どうするか。

子コンポーネントでコントロールのデータが変わった場合、親コンポーネントにイベント通知をして、親コントロールで値を変更する必要があります。

めんどくさいです。

ちなみに、親コンポーネントから子コンポーネントに、値でデータを渡した場合は、子コンポーネントのメソッドから値を設定することができます。

親コンポーネントからはオブジェクトで受け渡さない方がよさそうです。