vue关于重置表单数据出现undefined的解决

关于重置表单数据出现undefined的问题，我们可以进行如下的解决方式：

问题原因

首先，我们需要明确这个问题的原因。在 Vue 中，我们重置表单数据通常使用 Object.assign 或者展开操作符 ... 来将一个空对象里的数据覆盖当前表单组件里的数据。常见代码如下：

// resetFormData 方法里重置formData数据
resetFormData() {
  this.formData = Object.assign({}, this.defaultFormData)
}

但是，如果默认的表单数据里有数组、对象等引用类型的数据，那么在进行浅拷贝时，这些数据只是复制了引用地址，当我们修改表单数据时，就会直接影响到原始数据，导致数据的“重置”不生效，出现 undefined 的情况。

解决方案

方案一：深拷贝

为了避免修改原始数据，我们可以通过深拷贝的方式来重置表单数据。Vue 中提供了一个非常方便的方法 Vue.set(target, key, value) 来帮助我们深度设置响应式数据。示例如下：

resetFormData() {
  this.formData = JSON.parse(JSON.stringify(this.defaultFormData));
  // 将所有数据设置为响应式
  Object.keys(this.formData).forEach(key => {
    Vue.set(this.formData, key, this.formData[key]);
  });
}

这样我们就能完美地复制一个数据的副本，同时又不会影响到原始数据。

方案二：使用 lodash 的深度克隆方法 cloneDeep

除了通过手写代码的方式实现深拷贝之外，我们还可以使用 lodash 提供的 cloneDeep 方法来进行深度克隆，需要先安装 lodash 模块：

npm install lodash --save

然后再使用 cloneDeep 方法进行深度克隆：

import _ from 'lodash';

resetFormData() {
  this.formData = _.cloneDeep(this.defaultFormData);
}

这样我们就能轻松地获得一个副本数据，而且还有很好的可维护性和代码可读性。

总结

通过对 Vue 重置表单数据出现 undefined 的问题的原因分析，以及如何通过深拷贝和 lodash 的深度克隆方法解决问题的讲解，相信你已经掌握了解决这个问题的完整攻略。