How to correctly disable the button based on condition in Vue

Question

I am trying to compate initial object and updated object specific values so if they are the same button should be disabled. However it seems even after change button is disabled:

  setDisabled(){
  return this.selectedItem.color === this.selectedItemInitial.color &&
  this.selectedItem.price === this.selectedItemInitial.price
  },

What is wrong and why it's not changing boolean value?

Answer 1

The function setDisabled you defined is executed once when the component is rendered but not when the data in the component changes.

You should move setDisabled (and rename it to buttonDisabled for clarity) to the computed properties of the component. This way it will get updated when data or props get updated in the component:

computed: {
  buttonDisabled: function(){
        return this.selectedItem.color === this.selectedItemInitial.color && this.selectedItem.price === this.selectedItemInitial.price
   }
}

and use it like this in the html:

<!-- No parenthesis when using a computed property -->
<button :disabled="buttonDisabled"> ACTION </button>

Answer 2

You don't show how you instantiate your component data, so its hard to see if there is a logic error.

In general, that method works, if used like this:

<button :disabled="setDisabled()"> ACTION </button>

also if I suggest you to change it to a computed property instead:

computed: {
  setDisabled: function(){
        //logic here
   }
}

Answer 3

You can also do the whole thing in the template. Depending on how the variables are set.

<button :disabled="selectedItem.color === selectedItemInitial.color">Click</button>