CODEWITHSUNDEEP
vue.js
Dannz
Dannz

Reputation: 495

computed property doesn't update input attribute

I have an input field which that value of disabled is defined by a computed property.

At first, the length is the array is 0 and after the backend sends the data and initializes that array with the correct value, but it seems that after initialization it won't be updated. Even though that in debug it seems that the reactivity does work but it doesn't update the DOM.

<input :disabled="isDisabled" name="header" type="checkbox">

and the isDisabled method as follows:

computed: {
  isDisabled(){
    return this.items.length === 0 ? 'disabled' : '';
  }
}

The items come from the props which are updated later on from the parent component:

props: {
  items: {
    type: Array,
    required: true,
  }
}

Upvotes: 1

Views: 282

Answers (1)

tao
tao

Reputation: 90277

:disabled expects a boolean, not the string value of the actual disabled attribute. So:

isDisabled(){
  return this.items.length === 0;
}

... will work.

Upvotes: 1

Related Questions