算出プロパティ「computed」のSetter関数 [Vue.js]

Vue.js The Progressive JavaScript Framework

ここでは、算出プロパティ(computed)のSetter関数について紹介します。

算出プロパティcomputedのGetter関数

算出プロパティのcomputedは、依存しているデータが変更されると自動で値を算出する便利な機能です。
computedは計算処理後の値を変数に代入できるプロパティです。

上記のコードでは、fullNameという算出プロパティを定義しています。
fullNameでは、firstNameとlastNameを半角スペースで区切ってつなげた文字列を生成して返しています。
fullName内で参照しているfirstName、またはlastNameの値が変更されると、関数が実行されfullNameが更新されます。

算出プロパティは上記のように依存するデータ(ここではfirstNameとlastName)をもとに生成したデータを取得するGetter関数となっています。

算出プロパティcomputedのSetter関数

computedはデフォルトではGetter関数になっていますが、必要に応じてSetter関数を設定することもできます:
Setter関数では、引数に値を受け取り、受け取った値をもとに処理を行うことができます。

Getter関数とSetter関数の実装

computedにGetter関数とSetter関数を実装する場合は以下のようにします。

上記のcomputedに定義したfullNameプロパティでは、Getter関数でfirstNameとLastNameをもとにfullNameを返しています。
Setter関数では、fullNameの値を受け取り、firstNameとLastNameに設定しています。
Setter関数を定義する場合は、Getter関数を「get()」として定義し、Setter関数を「set(受け取る値)」として定義します。
Setter関数を使う場合は、get()とset()を対で記述する必要があります。

computedの構文(書式)

Getter関数のみ定義する場合

または

Getter関数とSetter関数を定義する場合

または

Vue.js 入門 Tips 一覧