vue adds and edits the same form, and el-form forms empty form data after submission

To add and edit contacts in the project, click on the add and edit button of the parent page, using the same form pop-up window, data add and edit with the same pop-up window, not using v-if in the pop-up window, the performance is not very good, there are forms in the pop-up window, close the pop-up window after editing the data of the pop-up window, and then click When you click add, the form data in the pop-up window is still the data edited before, so you can't empty the form data. The next solution is, hey hey.

Mainly used in the el-form form form has an event method resetField()** which clears the form data and resetField(),** needs to monitor the form data. I judge whether to add or edit the form data by whether the form data has an id value. If I add data, I need to call resetField() to reset the form data, so editing data does not need to be invoked. resetField() is also called to reset the form data when the form pop-up window is closed. ** Open the add data again after editing the data, and the page will not have the previous data, nor will the validation information appear on the page.

1. Call the sub-bullet box form component (AddEdit.vue) on the parent page

 Form is the form data of the sub-component, and meg is the title (add or edit) of the bullet window of the sub-component.
 <!-- <add-edit :msg.sync="msg" v-if='msg' :form='form'></add-edit> -->
  <! - Not using v-if because of frequent clicks on edits and additions, the performance is not very good - >
<add-edit :msg.sync="msg" :form='form'></add-edit>

2. Click on the Edit button of the parent page to pass the personnel information to AddEdit.vue

<template>
  <el-dialog :visible.sync="isShow" width="500px" class="edit-contact" :before-close="closeDialog">
    <span slot="title">{{msg}}Contacts</span>
    <el-form :model="form" ref="ruleForm" label-width="100px" :rules="rules" size="small">
      <el-form-item :label="it.label" :prop="it.prop" v-for="it in formLabel" :key="it.prop">
        <el-input v-model="form[it.prop]" :placeholder="`Please input ${it.label}`"></el-input>
      </el-form-item>
    </el-form>
    <div class="base-btn-action">
      <el-button size="small" type="primary" @click="saveContact">{{form.id?'edit':'Add to'}}</el-button>
      <el-button size="small" @click="closeDialog">Cancellation</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    msg: {
      //"Add" or "Edit"
      type: String,
      default: ""
    },
    form: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formLabel: [
        { label: "Full name", prop: "name" },
        { label: "mailbox", prop: "email" },
        { label: "Contact information", prop: "phone" }
      ],
      rules: {
        name: [{ required: true, message: "Please enter your name.", trigger: "change" }],
        email: [
          { required: true, message: "Please enter your mailbox", trigger: "change" },
          { type: "email", message: "Please enter the correct email address", trigger: ["blur"] }
        ],
        phone: [
          { required: true,  message: "Please enter your cell phone number.", trigger: "change" }
        ]
      }
    };
  },
  computed: {
  //Judging whether the bullet box is displayed or not by the value of msg of props data
    isShow() {
      return this.msg === "" ? false : true;
    }
  },
  watch: {
  //Listen for form data
    form(n) {
    //Data addition, initialization into the bullet box, you need to reset the initial value of the form data, otherwise the data of the previous bullet box will be displayed in the page, and the verification information will be displayed in the page.
      if (!n.hasOwnProperty("id")) {
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields(); //form Form Rendering Executed in Equivalent Bullet Window
        });
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit("update:msg", "");
      setTimeout(() => {
      //When the bullet window is closed, the form is reset to the initial value and the check result is removed.
        this.$refs.ruleForm.resetFields();
      }, 200);
    }
  }
};
</script>

Okay, the problem has been solved. Let's record it here, and we can turn it back later.