时间戳

首页 > 解决方案 > 如何根据Vue中的条件正确禁用按钮

javascript - 如何根据Vue中的条件正确禁用按钮

问题描述

我正在尝试比较初始对象和更新的对象特定值，因此如果它们是相同的按钮应该被禁用。但是，即使更改按钮被禁用，它似乎也是如此：

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

出了什么问题，为什么它没有改变布尔值？

标签： javascriptvue.jsecmascript-6vuejs2vue-component

解决方案

您定义的函数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>

推荐阅读