除一个 Vue.js 之外的所有字段的表单重置

Question

我正在尝试找到一种方法来排除表单中已禁用且包含用户 ID 号值的字段输入

我想知道如何调整 this.$refs.form.reset();，因为它工作得很好，但它会清除所有内容，我希望包含 ID 值并重置其余字段，例如 name surname age income 等等

ID 很重要的原因是用户在开始时在注册步骤中提供了这个，而我正在谈论的这个表格位于其他地方以完成他的个人资料我不想再次要求用户再次输入他的 ID。

如果有人知道如何完成这个，那将是一个很大的帮助

Answer 1

表单的reset方法简单地查看绑定到它的所有输入并在循环中重置每个输入然后清空错误包，观察：

reset (): void {
  this.inputs.forEach(input => input.reset())
  this.resetErrorBag()
},

没有理由你不能这样做，除非它们被禁用：

resetForm() {
  this.$refs.form.inputs.forEach(input => {
    if (!input.disabled) {
      input.reset()
    }
  })
  this.$refs.form.resetErrorBag() // necessary to remove validation errors after the field values are removed
}

然后您可以使用 this.resetForm() 调用该函数（针对您的 Vue 实例，而不是您的 VForm），它应该按照您想要的方式运行。

免责声明：目前无法测试。 input.disabled 可能不容易获得，可能需要进一步检查 input 元素。

除一个 Vue.js 之外的所有字段的表单重置

Form reset for all fields except one Vue.js

vue.js

vuetify.js