1

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

我正在使用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>

4

2 回答 2

0

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

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

演示

于 2018-11-25T15:41:00.097 回答
0

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

getUserData() {
        if (this.$refs.empInfo.validate()) {
            this.$emit('get-user-data', this.empInfo);
            this.$refs.empInfo.reset();
        }
}
于 2018-11-25T20:21:19.230 回答