ここでは、算出プロパティ（computed）のSetter関数について紹介します。
目次
算出プロパティcomputedのGetter関数
算出プロパティのcomputedは、依存しているデータが変更されると自動で値を算出する便利な機能です。
computedは計算処理後の値を変数に代入できるプロパティです。
|
1 2 3 4 5 |
computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } } |
上記のコードでは、fullNameという算出プロパティを定義しています。
fullNameでは、firstNameとlastNameを半角スペースで区切ってつなげた文字列を生成して返しています。
fullName内で参照しているfirstName、またはlastNameの値が変更されると、関数が実行されfullNameが更新されます。
算出プロパティは上記のように依存するデータ（ここではfirstNameとlastName）をもとに生成したデータを取得するGetter関数となっています。
算出プロパティcomputedのSetter関数
computedはデフォルトではGetter関数になっていますが、必要に応じてSetter関数を設定することもできます:
Setter関数では、引数に値を受け取り、受け取った値をもとに処理を行うことができます。
Getter関数とSetter関数の実装
computedにGetter関数とSetter関数を実装する場合は以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
computed: { fullName: { // Getter関数 get: function() { return this.firstName + ' ' + this.lastName }, // Setter関数 set: function(newValue) { const names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } |
上記のcomputedに定義したfullNameプロパティでは、Getter関数でfirstNameとLastNameをもとにfullNameを返しています。
Setter関数では、fullNameの値を受け取り、firstNameとLastNameに設定しています。
Setter関数を定義する場合は、Getter関数を「get()」として定義し、Setter関数を「set(受け取る値)」として定義します。
Setter関数を使う場合は、get()とset()を対で記述する必要があります。
computedの構文（書式）
Getter関数のみ定義する場合
|
1 2 3 |
変数名: function() { return 処理 } |
または
|
1 2 3 |
変数名() { return 処理 } |
Getter関数とSetter関数を定義する場合
|
1 2 3 4 5 6 7 8 |
変数名: { get: function() { return 処理 }, set: function(引数) { 処理 } } |
または
|
1 2 3 4 5 6 7 8 |
変数名: { get() { return 処理 }, set(引数) { 処理 } } |
