Поле формы Vue js должно быть пустым

У меня есть родительский компонент, и я присваиваю значения в форме дочернего компонента. Но после отправки формы я хочу, чтобы поле формы было пустым.

Я использую функцию 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>


vue.js vuejs2 element-ui
person rupamwadia    schedule 24.11.2018    source источник
comment
Вы можете просто написать метод сброса в своем компоненте и инициализировать значения (либо с помощью empData, либо с пустыми значениями) и вызвать этот метод на created(), а затем вызвать этот метод при сбросе или после изменения данных.   -  person ssc-hrep3    schedule 24.11.2018

Ответы (2)


arrow_upward
0
arrow_downward

Форма пользовательского интерфейса элемента, похоже, захватывает данные, которыми она инициализируется, и resetFields() повторно инициализирует форму этими данными. Вы можете отложить наблюдателя до следующей отметки, чтобы компонент изначально был пуст empInfo быть переданы в форму UI элемента в качестве исходных данных, которые затем будут использоваться в resetFields().

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

демонстрация

person tony19    schedule 25.11.2018
comment
@ user3739946 Нет проблем :) - person tony19; 26.11.2018

arrow_upward
0
arrow_downward

Если вы используете родительский и дочерний компоненты, рекомендуется отправлять данные в качестве выходных данных для родительского компонента, а затем обрабатывать данные. Этот родительский дочерний шаблон хорош для создания динамической формы. Метод сброса очищает вашу форму.

getUserData() {
        if (this.$refs.empInfo.validate()) {
            this.$emit('get-user-data', this.empInfo);
            this.$refs.empInfo.reset();
        }
}
person Daaron    schedule 25.11.2018
comment
Хотя этот код может решить вопрос, хороший ответ всегда должен объяснять, в чем проблема и как этот код помогает. - person BDL; 26.11.2018