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?
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>
selectedItem and selectedItemInitial? Vue detect reference changes so you may change the properties of selectedItem but not the object itself and Vue wont detect it. I suspect this errorYou 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
}
}
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>
