Vue点击submit提交表单时空form对象存入数组问题排查

问题根因 #

• JavaScript中对象是引用类型，执行this.arr.push(this.form)时，存入数组的不是当前form的快照值，而是form对象的内存地址引用。数组内的元素和组件实例上的this.form指向同一块内存空间，后续执行this.form.input1 = ""重置表单时，数组中存储的对象会同步被修改。
• 控制台打印对象时采用懒求值机制：打印语句执行时不会立刻序列化对象内容，当你手动在控制台展开打印结果查看时，表单重置逻辑已经执行完成，因此看到的打印结果是空对象，并非代码执行顺序颠倒。

修复方法 #

推入数组时存入form对象的副本，切断和原form对象的引用关联即可。针对你当前只有一层属性的表单结构，使用浅拷贝就可以满足需求：

methods: {
  addIntoArr() {
    // 拷贝当前form值再推入数组
    this.arr.push({
      ...this.form
    });
    // 重置表单不会影响数组中已存入的内容
    this.form.input1 = "";
  },
}

如果后续表单存在多层嵌套的对象/数组属性，替换为深拷贝即可：

this.arr.push(JSON.parse(JSON.stringify(this.form)))

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