如何根據Vue中的條件正確禁用按鈕

Question

我正在嘗試比較初始 object 和更新的 object 特定值，因此如果它們是相同的按鈕，則應禁用它們。 但是，即使更改按鈕被禁用，它似乎也是如此：

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

出了什么問題，為什么它沒有改變 boolean 值？

Answer 1

您定義的 function setDisabled在組件渲染時執行一次，但在組件中的數據發生更改時不執行。

您應該將setDisabled （為了清楚起見將其重命名為buttonDisabled ）移動到組件的計算屬性中。 這樣，當組件中的data或props更新時，它將得到更新：

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

並在 html 中像這樣使用它：

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

Answer 2

您沒有展示如何實例化組件數據，因此很難看出是否存在邏輯錯誤。

一般來說，該方法有效，如果像這樣使用：

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

另外，如果我建議您將其更改為計算屬性：

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

Answer 3

您也可以在模板中完成所有操作。 取決於變量的設置方式。

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