Form reset for all fields except one Vue.js-CodePudding

I'm trying to find a way to to exclude one field input in my form that is disabled and contains the value of a users ID number

I would like to know how I can tweak this.$refs.form.reset(); because it works perfectly but it clears EVERYTHING and I wish to contain the ID value and resets the rest of the fields like name surname age income etc

The reason why I the ID is important is that the user gives this in a sign-up step at the start and this form that I am talking about is located somewhere else to complete his profile I don't want to ask the user again to type his ID in again.

If anyone knows how to accomplish this it would be a great help

CodePudding user response：

The reset method of the form simply looks at all the inputs bound to it and resets each one within a loop then empties the error bag, observe:

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

There's no reason you can't do the same, except for when they're disabled:

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
}

Then you can call that function (against your Vue instance, not your VForm) with this.resetForm() and it should work out the way you want.

Disclaimer: Can't test it at the moment. input.disabled may not be readily available and may require further inspection of the input element.