Vue中如何根据条件正确禁用按钮？对象值对比失效排查

我来帮你梳理这个问题！你遇到的核心问题大概率是对象引用指向同一内存地址，导致修改selectedItem时，初始对象selectedItemInitial也跟着同步变化，所以你的判断条件永远为true，按钮一直处于禁用状态。

1. 问题本质：对象的引用赋值坑 #

如果你初始化selectedItemInitial的时候是这么写的：

this.selectedItemInitial = this.selectedItem;

这时候两个变量其实指向的是同一个对象——它们共享内存里的同一块数据空间。当你修改this.selectedItem.color或者price时，this.selectedItemInitial的对应属性会自动跟着变，所以你的判断条件this.selectedItem.color === this.selectedItemInitial.color永远成立，setDisabled()一直返回true。

2. 解决方案：创建独立的对象副本 #

你需要在初始化时给selectedItemInitial创建一个和原对象完全独立的副本，而不是直接引用原对象。根据你的对象结构，选择合适的拷贝方式：

情况一：对象只有顶层属性（无嵌套） #

如果selectedItem只有color、price这类顶层属性，用浅拷贝就足够了：

// 方法1：扩展运算符（推荐，语法简洁）
this.selectedItemInitial = {...this.selectedItem};

// 方法2：Object.assign
this.selectedItemInitial = Object.assign({}, this.selectedItem);

情况二：对象包含嵌套属性 #

如果selectedItem里有嵌套对象（比如this.selectedItem.spec.size），浅拷贝会保留嵌套对象的引用，这时候需要用深拷贝：

// 方法1：JSON序列化（注意：无法拷贝函数、Symbol等特殊类型）
this.selectedItemInitial = JSON.parse(JSON.stringify(this.selectedItem));

// 方法2：用工具库（比如Lodash的_.cloneDeep）
// import _ from 'lodash';
// this.selectedItemInitial = _.cloneDeep(this.selectedItem);

3. 额外排查点：响应式更新未触发 #

如果你已经做了独立副本，但setDisabled()的返回值还是没变化，可能是你的前端框架（比如Vue/React）没有检测到selectedItem的属性变化。举个Vue的例子：

• 如果是修改对象的已有属性，直接赋值通常没问题，但如果是新增属性，需要用Vue.set；
• 更稳妥的方式是通过重新赋值对象来强制触发响应式：

// 修改属性时，用扩展运算符重新赋值
this.selectedItem = {...this.selectedItem, color: newColorValue};

快速验证方法 #

你可以在setDisabled()里加个日志，直观查看两个对象的属性值，确认问题根源：

setDisabled(){
  console.log('初始值:', this.selectedItemInitial.color, this.selectedItemInitial.price);
  console.log('当前值:', this.selectedItem.color, this.selectedItem.price);
  return this.selectedItem.color === this.selectedItemInitial.color && this.selectedItem.price === this.selectedItemInitial.price;
}

运行后看控制台输出，就能立刻知道是两个对象的属性真的相等，还是引用导致的同步变化。

内容的提问来源于stack exchange，提问作者user12009061