Computed property not disabling input-CodePudding

I am trying to set the disabled property on a text field via checkbox. I'm referencing this item, but none of the solutions are working for me.

My text field and checkbox are as follows:

      <input
        type="checkbox"                  
        
        v-model="formData.useSystemSetting"            
      >


     <input
      type="text"
      
      :
      placeholder="Enter the Maximum Count"
      v-model="formData.maxCount"
      :disabled = "isDisabled"
    >

My computed property is:

computed:{
 isDisabled: function() {      
  this.useSystemSetting = this.useSystemSetting == true?false:true
  return this.useSystemSetting;
},

I'm also setting useSystemSettings in the data section to true because if I don't it doesn't get populated. When I add a breakpoint to the computed property, it's only getting hit on the page load, but not after.

CodePudding user response：

It's not allowed to mutate other properties inside the computed property, you should only do some process and return a value:

computed:{
  isDisabled: function() { 
    return this.useSystemSetting ? false : true;
  }
}

CodePudding user response：

You shouldn't mutate data inside a computed property. A computed property is used whenever you need to use logic for getting a value which includes reactive data, as you'd find here.

You could try something like:

computed:{
  isDisabled: function() { 
    return !this.formData.useSystemSetting;
  }
}

Presuming that the formData object will not be null at this point. To prevent that, you could also use something like:

return ((this.formData || {}).useSystemSetting || true) ? false : true;