Vuejs Computed Property warns that I have no setter

Question

I have a code like this:

<button
  @click="addFieldRow"
  :disabled="disableAddRow"
>

disableAddRow is a computed property like this:

disableAddRow() {
  if (this.currentIndex !== null) {
    return !this.fieldList[this.currentIndex].filterApplied;
  }
  if (this.currentIndex === null && this.fieldList.length === 1) {
    return true;
  }
  return false;
}

Works as it should, but on my console log, I get the following warning:

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

I don't get why I need a setter? And if I do need a setter, I don't understand what I need to set...

Thank you for your time and help!

Answer 1

That warning is indicating that, somewhere in your code, you are assigning a value to your disableAddRow computed property.

The code you shared wouldn't cause that warning, so you must be inadvertently assigning it a value somewhere else. You simply need to not set the value of the computed property and you won't get that warning anymore.

---

For a little more context: computed properties, by default, retrieve the value returned by the defining function. It is, however, possible to define setters for computed properties as well (which is what the warning is alluding to).