Vue js表单字段应该为空

Question

我有一个父组件，我正在以子组件形式分配值。但是在提交表单后，我希望表单字段应该为空。

我正在使用 resetFields 函数来重置值，但是当我使用这些函数时，它正在设置最后一个值，我从父组件发送它而不是重置值我希望表单字段应该是空的。

<script>
    export default {
        props: ["empData"],
        data {
            return() {
                empInfo: {
                    name: "",
                    id: null,
                    age: null
                }
            }
        },
        methods: {
            getUserData() {
                if (response.status == "SUCCESS") {
                    this.$refs['empInfo'].resetFields();
                }
            }
        }
        watch: {
            empData: immediate: true,
            handler() {
                this.empInfo = this.empData;
            }
        }
    }
</script>

<template>
  <div>
    <el-form :label-position="labelPosition" :model="empInfo" status-icon :rules="rules" ref="empInfo">
      <el-form-item label="Employee Name" prop="name">
        <el-input v-model="empInfo.markupName"></el-input>
      </el-form-item>
      <el-form-item label="EMployee Id" prop="id">
        <el-input v-model="empInfo.id"></el-input>
      </el-form-item>
      <el-form-item label="Employee Age" prop="age">
        <el-input v-model="empInfo.age"></el-input>
      </el-form-item>
      <el-button @click="getUserData">Submit</el-button>
  </div>
</template>

Answer 1

Element UI 表单似乎锁定了它初始化时使用的数据，resetFields() 使用该数据重新初始化表单。您可以将观察者推迟到next tick，以便组件最初为空的empInfo 可以作为初始数据传播到Element UI 表单，然后在resetFields() 中使用。

watch: {
  empData: {
    immediate: true,
    handler(value) {
      this.$nextTick(() => {
        if (value) {
          this.empInfo = value;
        }
      });
    }
  }
}

demo

Answer 2

如果您使用父子组件，最好将数据作为输出发送到父组件，然后处理数据。这种父子模式有利于制作动态表格。重置方法会清除您的表单。

getUserData() {
        if (this.$refs.empInfo.validate()) {
            this.$emit('get-user-data', this.empInfo);
            this.$refs.empInfo.reset();
        }
}