Computed property not disabling input

Question

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"                  
        class="form-check-input"
        v-model="formData.useSystemSetting"            
      >


     <input
      type="text"
      class="form-control"
      :class="hasError('maxCount') ? 'is-invalid' : ''"
      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.

score 2 · Answer 1 · answered Jun 24 '22 at 13:45

2

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;
  }
}

answered Jun 24 '22 at 13:45

Boussadjra Brahim

82,684
19
144
164

It's still not working. The function only seems to be getting hit upon page load, not when I check the box on and off. – kickinchicken Jun 24 '22 at 13:49
it should be bound to `formData.useSystemSetting` like ` return this.formData.useSystemSetting ? false : true;` – Boussadjra Brahim Jun 24 '22 at 13:52

fcsarthur · Answer 2 · 2022-06-24T14:45:20.123

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;

Computed property not disabling input

2 Answers2