如何根据Vue中的条件正确禁用按钮答案

【问题标题】：How to correctly disable the button based on condition in Vue如何根据Vue中的条件正确禁用按钮
【发布时间】：2020-10-30 04:35:10
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript vue.js ecmascript-6 vuejs2 vue-component

【解决方案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>

【讨论】：

你能说明你是如何分配selectedItem 和selectedItemInitial 的吗？ Vue 检测引用更改，因此您可以更改 selectedItem 的属性，但不能更改对象本身，并且 Vue 不会检测到它。我怀疑这个错误
我认为你是对的，在这种情况下如何解决？

【解决方案2】：

您没有展示如何实例化组件数据，因此很难看出是否存在逻辑错误。

一般来说，如果像这样使用，该方法是有效的：

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

如果我建议您将其更改为计算属性：

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

【讨论】：

【解决方案3】：

您也可以在模板中完成所有操作。取决于变量的设置方式。

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

【讨论】：