Computed property “hoge” was assigned to but it has no setterのエラーの解決方法

Vue.js

Computed property “hoge” was assigned to but it has no setter

記事のタイトルにあるように、vue.jsでの開発している最中、Computed property "hoge" was assigned to but it has no setterというエラーが検証画面のconsoleに表示されました。エラーを直訳すると「hogeというプロパティが割り当てられているが、そのsetterがない」と書かれています。そう、hogeプロパティのsetterがないのが原因です。なのでsetterを追加すると解決するはずです。このエラーが発生する時はおそらくsetter関数を持たない算出プロパティの値を書き換えようとしようとした場面に発生すると思います。

筆者
筆者

該当する部分のプログラムのメモをなくしてしまった為、エラーが起きた時の具体例がお見せできず申し訳ございません。

Setterについて

算出プロパティの関数

算出プロパティは以下の関数を持ちます。

・getter

・setter

ディフォルトではgetter関数が使われるのですが、setter関数も定義することで使えるようになります。公式サイトのサンプルコードを参考に書いてみると

setter関数はsetと書きます。この関数はhogeNameが書き換えられた時、すなわちvm.hogeName = "katuo"といった処理が行われると発火します。この場合引数である newValueにはkatuoが格納されます。勘違いしてはいけないのは  vm.hogeName = "katuo"hogeNameが書き換わるわけではありません。hogeNameに入る値はあくまでもget関数で返される値です。hogeNameを書き換えたい場合はget関数での返り値の値をset関数内の処理で更新すればよいのです。サンプルコードを書くと以下のような感じ

 

タイトルとURLをコピーしました