Vue 表单编辑没做更改不让保存，解决方法介绍

2024-02-03 14:04:23

问题背景

在 Vue 中，经常会遇到这样的场景：用户打开一个表单进行编辑，但是没有实际做出任何更改，却依然点击了保存按钮，导致提交了空数据。这种情况下，需要对表单进行判断，如果用户没有做出任何更改，则禁用保存按钮，否则，才允许用户提交更改。

解决方法

1. 使用监听器

Vue 提供了多种方式来监听表单的更改。最简单的方法是使用 v-model 指令。v-model 指令可以将表单元素的值与 Vue 实例的数据绑定在一起，并且当表单元素的值发生变化时，v-model 指令会自动更新 Vue 实例中的数据。

可以在 v-model 指令中添加一个监听器，当表单元素的值发生变化时，监听器就会被触发。在监听器中，可以检查表单元素的值是否与原始值相同。如果相同，则禁用保存按钮，否则，则允许用户提交更改。

<input v-model="formData.name" @change="checkChanges">

// 在 Vue 实例中定义 formData 数据
const formData = {
  name: '',
  email: '',
  phone: '',
  address: '',
};

// 定义监听器
const checkChanges = (e) => {
  // 检查表单元素的值是否与原始值相同
  const originalData = {
    name: '',
    email: '',
    phone: '',
    address: '',
  };
  const isSame = JSON.stringify(formData) === JSON.stringify(originalData);

  // 如果相同，则禁用保存按钮
  if (isSame) {
    document.getElementById('save-button').setAttribute('disabled', true);
  } else {
    // 否则，则允许用户提交更改
    document.getElementById('save-button').removeAttribute('disabled');
  }
};

2. 使用 computed 属性

另一种方法是使用 computed 属性。computed 属性可以根据其他数据计算出一个新的值。在 computed 属性中，可以检查表单元素的值是否与原始值相同。如果相同，则禁用保存按钮，否则，则允许用户提交更改。

<input v-model="formData.name">

// 在 Vue 实例中定义 formData 数据
const formData = {
  name: '',
  email: '',
  phone: '',
  address: '',
};

// 定义 computed 属性
const isSame = Vue.computed(() => {
  // 检查表单元素的值是否与原始值相同
  const originalData = {
    name: '',
    email: '',
    phone: '',
    address: '',
  };
  return JSON.stringify(formData) === JSON.stringify(originalData);
});

// 在模板中使用 computed 属性
<button :disabled="isSame">保存</button>

3. 使用 watch 方法

第三种方法是使用 watch 方法。watch 方法可以监视数据变化，并在数据变化时执行相应的函数。在 watch 方法中，可以检查表单元素的值是否与原始值相同。如果相同，则禁用保存按钮，否则，则允许用户提交更改。

<input v-model="formData.name">

// 在 Vue 实例中定义 formData 数据
const formData = {
  name: '',
  email: '',
  phone: '',
  address: '',
};

// 定义 watch 方法
watch: {
  formData: {
    handler(newValue, oldValue) {
      // 检查表单元素的值是否与原始值相同
      const originalData = {
        name: '',
        email: '',
        phone: '',
        address: '',
      };
      const isSame = JSON.stringify(newValue) === JSON.stringify(originalData);

      // 如果相同，则禁用保存按钮
      if (isSame) {
        document.getElementById('save-button').setAttribute('disabled', true);
      } else {
        // 否则，则允许用户提交更改
        document.getElementById('save-button').removeAttribute('disabled');
      }
    },
    deep: true,
  },
}