ホーム > Vue > VueのComputedのデータを書き換えようとするとエラーが出る
Vue

VueのComputedのデータを書き換えようとするとエラーが出る

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 解決方法
  2. 具体例
  3. まとめ
オススメ本

⇨ Vue 記事の目次はこちら

Vue の Computed のデータを書き換えようとすると以下のエラーが出ます。

Computed property "loading" was assigned to but it has no setter.

"loading"部分が関数名なので人によって変わる部分になると思います。

解決方法

関数などでComputedの関数を書き換えない

Computed は算出プロパティといって、

何かしらの計算や表示の仕方を変えたい時などで使います。

なので、Computed のデータを直接、書き換えようとしたらエラーになります。

Vue の Computed 算出プロパティを使う方法

具体例

もともと a と b を足したものを c として出していたものを、直接書き換えるとエラーになります。

<template>
  <div>{{ c }}</div>
</template>
<script>
  export default {
    data() {
      return {
        a: 1,
        b: 2,
      };
    },
    methods: {
      //この関数でcomputedのcという関数を直接書き換えているのでエラーがでる
      changeNumber:function{
        this.c = 5
      }
    },
    computed: {
      c: function () {
        return this.a + this.b;
      },
    },
  };
</script>

オススメ本

まとめ

エラーから直接的なヒントとなる記事を書いてみようと思いました。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！