Vue.jsの「Computed property ~ was assigned to but it has no setter」のエラーを解決する方法

2019-12-02

はじめに

この記事ではVue.jsを使って開発をしている最中に「Computed property “” was assigned to but it has no setter」というエラーに遭遇して「なぜこのエラーが発生するのか?」がわからない人に向けて解説記事を書いていこうと思います。

「Computed property "hoge" was assigned to but it has no setter」が発生する理由

算出プロパティ自身を更新しようとしたときに算出プロパティにsetterが定義されていない場合このエラーが発生します。具体例を挙げると次のようなケースです。

<template> <div> <input v-model="hoge" /> </div> </template> <script> export default { data() { return { value: 'hellow', }; }, computed: { hoge() { return this.value; }, }, }; </script>

hogeという算出プロパティを定義して、このhogeをinput要素のv-modelで直接更新するコードです。今回で言うとhogeにsetterを定義していないのでinput要素を更新してhogeを更新しようとすると「 Computed property "hoge" was assigned to but it has no setter」のエラーが発生します。

「Computed property "hoge" was assigned to but it has no setter」を解決する方法

今回のエラーを解決するにはsetterを定義して、setter内で値の更新を行うようにすれば良いです。せっかくなのでsetterとは何か?を公式ドキュメントの内容を元に解説していきます。まず算出プロパティには

  • getter
  • setter

の2種類のメソッドが存在します。ざっくりいってしまうとgetterは値を取得するためのメソッド、setterは値を更新するためのメソッドです。

In computer science, a mutator method is a method used to control changes to a variable. They are also widely known as setter methods. Often a setter is accompanied by a getter (also known as an accessor), which returns the value of the private member variable.

引用:「Mutator method

算出プロパティ場合、特に何も指定しないとgetterのみが定義されます。

computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }

算出プロパティをユーザーイベントなどをトリガーに更新したい場合は明示的にsetter(構文的にはset)を定義します。

// ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ...

この場合fullNameが更新された場合、setterが発火します。newValueには更新後の値が参照されています。では最後に最初のサンプルコードをエラーが出ないように修正すると以下のようになります。

<template> <div> <input v-model="hoge" /> {{ hoge }} </div> </template> <script> export default { data() { return { value: 'hellow', }; }, computed: { hoge: { get() { console.log('getter called'); return this.value; }, set(value) { console.log('setter called', value); this.value = value; }, }, }, }; </script>

算出プロパティのhogeにsetterを定義してhogeが更新されたときに発火、setter内で値を更新するようになりました。これにより今回のエラーは発生しなくなります。

最後に

今回算出プロパティにgetter/setterを定義する方法を紹介しましたが、自分の経験では実際にはこのように書くことはあんまりない印象ですね。単純に経験不足ということもあるかもしれませんが。

参考文献:

KATUO
Software Engineer