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();
        }
}

Vue js表单字段应为空

2 个答案: