CODEWITHSUNDEEP
vue.js
kickinchicken
kickinchicken

Reputation: 1625

Computed property not disabling input

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.

Upvotes: 1

Views: 574

Answers (2)

fcsarthur
fcsarthur

Reputation: 1

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;

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 2

Related Questions