Computed properties should be accessed properly according to the existence of getter or setter

• VUE_INVALID_COMPUTED_PROPERTY_ACCESS
• Error
• Medium
• vue

This rule applies when a value is read from or assigned to a computed property but the property does not have a getter or setter.

A computed property is normally getter-only if it is declared as a function. However, one can define a getter and a setter by using an object having get and set properties.

Unintended behaviors may occur if either getter or setter is missing as follows:

1. A value is read from a computed property but the getter is missing. In this case, Vue outputs a warning message and an undefined value is read.
2. A value is assigned to a computed property but the setter is missing. In this case, Vue outputs a warning message and the assignment is ignored.

Noncompliant Code Example

<script>
export default {
  data() {
    return {
      fooValue: '',
      barValue: ''
    }
  },
  computed: {
    foo: {
      set(x) {
        this.fooValue = validateFoo(x);
      }
    },
    bar() {
      return this.barValue;
    }
  },
  methods: {
    example1() {
      return this.foo; // VUE_INVALID_COMPUTED_PROPERTY_ACCESS alarm because 'foo' does not have a getter.
    },
    example2(x) {
      this.bar = x; // VUE_INALID_COMPUTED_PROPERTY_ACCESS alarm because 'bar' does not have a setter.
    }
  }
}
</script>

Compliant Code Example

<script>
export default {
  data() {
    return {
      fooValue: '',
      barValue: ''
    }
  },
  computed: {
    foo: {
      get() {
        return this.fooValue;
      },
      set(x) {
        this.fooValue = validateFoo(x);
      }
    },
    bar: {
      get() {
        return this.barValue;
      },
      set(x) {
        this.barValue = validateBar(x);
      }
    }
  },
  methods: {
    example1() {
      return this.foo;
    },
    example2(x) {
      this.bar = x;
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.41.0.

See

• Computed Properties

• [Vue warn]: Getter is missing for computed property "foo".

• [Vue warn]: Computed property "bar" was assigned to but it has no setter.