Vue+Element-ui form resetFields problem

Problem background

There are two scenarios in which the form cannot be reset when using this.$refs[formName].resetFields() yourself in development:

1. When the form is filled in the <Modal/> component, if the modal component is not mounted in the DOM element, an instance of the form form component cannot be obtained, so if this.$refs[formName] gets the instance, undefined will occur.

2. For example, when editing table data, you need to echo the form data. Our general approach is to put the form rawValue assignment and get it done, but it is invalid if we want to reset the form before adding new data.

Let me talk about the solutions I encountered above two solutions to the problem that I could not reset the form:

The first solution to reset the form cannot be solved

Only when it is judged that it is not undefined will the resetFields method be called:

if (this.$refs["form"] !== undefined) {
  this.$refs["form"].resetFields();
}

The second solution to reset the form

The logic of echoing the fill form data is written in the callback of the nextTick function. You can search for the nextTick principle by yourself, so I won't say much.

fillFormData(rawValue) {
  this.$nextTick(() => {
    for (let key in ) {
      if (rawValue[key]) {
        [key] = rawValue[key];
      }
    }
  });
},

import { nextTick } from 'vue';

const fillFormData = () => {
    nextTick(()=>{
      // Data echo logic    })
}

In this way, before adding new data, call resetFields() again.

This is the article about the problem of resetFields in Vue+Element-ui form resetFields not reset. For more related content of resetFields not reset, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!