Как правильно отключить кнопку по условию в Vue

Question

Я пытаюсь сопоставить значения c исходного объекта и обновленного объекта, поэтому, если они совпадают, кнопка должна быть отключена. Однако кажется, что даже после того, как кнопка изменения отключена:

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

Что не так и почему оно не меняет логическое значение?

Answer 1

Определенная вами функция 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="selectedItem.color === selectedItemInitial.color">Click</button>

Answer 3

Вы не показываете, как вы создаете экземпляр данных компонента, поэтому трудно увидеть, есть ли ошибка c logi.

В общем, этот метод работает, если используется следующим образом:

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

также, если я предлагаю вам заменить его на вычисляемое свойство:

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