Vue.js：仅在表单原始数据变更后启用提交按钮（含撤销判断）

嘿，我来帮你搞定这个表单按钮的状态控制需求！核心思路是保存原始数据的快照，并实时对比当前数据与快照的差异，以此来决定按钮是否启用。下面是具体的实现步骤和修改后的代码：

1. 保存原始数据快照 #

首先要在组件初始化时，对初始的user数据做深拷贝，把它存为原始数据的基准。因为直接赋值会让两个变量指向同一个对象，修改user会同步改变原始值，所以必须用深拷贝来隔离：

export default {
  data() {
    return {
      user: {
        name: '',
        email: '',
        age: '',
        sex: 'Male'
      },
      originalUser: {} // 用来存储原始数据的快照
    }
  },
  created() {
    // 用JSON序列化的方式实现深拷贝（适合普通数据类型）
    this.originalUser = JSON.parse(JSON.stringify(this.user));
    // 如果你的user包含Date这类无法JSON序列化的类型，可以用lodash的_.cloneDeep，或者自己实现深拷贝函数
  }
}

2. 编写计算属性判断数据是否变更 #

创建一个计算属性，用来对比当前user和originalUser的内容是否完全一致。如果一致，按钮保持禁用；不一致则启用：

computed: {
  isFormDisabled() {
    // 自定义一个简单的深比较函数，对比两个对象的所有属性值
    const isObjectEqual = (objA, objB) => {
      const keysA = Object.keys(objA);
      const keysB = Object.keys(objB);

      if (keysA.length !== keysB.length) return false;

      for (const key of keysA) {
        if (objA[key] !== objB[key]) return false;
      }
      return true;
    };

    // 返回是否禁用：数据未变更则禁用按钮
    return isObjectEqual(this.user, this.originalUser);
  }
}

3. 调整Pug模板的按钮绑定 #

注意你原来的变量名isFormEnable逻辑是反的——:disabled绑定的是「是否要禁用按钮」，所以应该绑定我们刚写的isFormDisabled，同时建议把表单的点击事件改成@submit.prevent，更符合表单的语义（用户按回车也能触发提交）：

template(lang="pug")
  form(@submit.prevent="save")
    .main
      input(v-model="user.name")
      input(v-model="user.email")
      input(v-model="user.age")
      select(v-model="user.sex")
        option Male
        option Female
    .footer
      button(:disabled="isFormDisabled") Save

补充小提示 #

如果你的表单数据包含嵌套对象、数组这类复杂结构，JSON序列化的深拷贝可能会出问题，这时候可以引入lodash的_.isEqual来简化对比逻辑：

import _ from 'lodash';

computed: {
  isFormDisabled() {
    return _.isEqual(this.user, this.originalUser);
  }
}

这样就能完美实现需求：按钮默认禁用，数据变更后自动启用，恢复原始数据后又会回到禁用状态～

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