⇨ Click here for the Vue article index

When trying to modify the data of a Computed property in Vue, the following error occurs:

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

The "loading" part is the name of the function and may vary depending on the person.

Solution

Do not modify the Computed function in a function, etc.

Computed properties in Vue are used when you want to change the way calculations or displays are done, so if you try to directly modify the Computed data, an error will occur.

How to use Computed properties in Vue

Example

If you try to directly modify the computation of c, which originally displayed the sum of a and b, an error will occur.

<template>
  <div>{{ c }}</div>
</template>
<script>
  export default {
    data() {
      return {
        a: 1,
        b: 2,
      };
    },
    methods: {
      // This function directly modifies the computed function `c`, resulting in an error
      changeNumber: function {
        this.c = 5
      }
    },
    computed: {
      c: function () {
        return this.a + this.b;
      },
    },
  };
</script>

Summary

I wanted to write an article that could serve as a direct hint from the error.

If you have any complaints, or corrections, please feel free to contact me via DM on Twitter below.

That's all!