Vue.js 表单执行reset操作时如何排除指定ID字段不被清空

• 方案1：暂存ID后重置再回填（改造成本最低，适配所有表单场景）
  直接修改现有重置逻辑，调用重置方法前先把用户ID暂存，重置完成后再回填即可，无需修改其他表单相关代码：

// 重置前暂存用户ID
const savedUserId = this.form.userId
// 执行原有表单重置逻辑
this.$refs.form.reset()
// 把ID回填到表单对象中
this.form.userId = savedUserId

• 方案2：自定义指定重置字段（可控性最高，推荐长期使用）
  不调用全量reset()方法，单独指定需要重置的字段，后续表单新增字段时也可以灵活调整重置范围：
  如果使用Element UI/Element Plus等UI框架的Form组件，可以调用内置的resetField方法单独重置目标字段：

methods: {
  handleFormReset() {
    // 仅列出需要重置的字段，不包含userId即可
    const resetFields = ['name', 'surname', 'age', 'income']
    resetFields.forEach(field => {
      this.$refs.form.resetField(field)
    })
  }
}

如果使用原生表单，可以提前预存除userId外的表单初始模板，重置时直接合并即可：

data() {
  return {
    form: {
      userId: '', // 注册完成后赋值，无需重置
      name: '',
      surname: '',
      age: null,
      income: null
    },
    // 重置模板仅包含需要重置的字段和对应初始值
    formResetTemplate: {
      name: '',
      surname: '',
      age: null,
      income: null
    }
  }
},
methods: {
  handleFormReset() {
    this.form = Object.assign({}, this.form, this.formResetTemplate)
  }
}

补充说明：如果你使用原生HTML表单，只要给userId对应的输入框设置初始value属性为用户注册后的ID值，原生reset()方法默认会把表单恢复到初始值，不会清空userId。如果出现清空情况，通常是因为你是组件挂载后才动态给form.userId赋值，没有同步到输入框的初始value属性，用上述两种方案都可以规避这个问题。

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