提交后 Vuetify 重置表单

Question

我正在使用 vuetify 在对话框中使用表单。像这样在页面中导入组件 -

<template>
  <div>
    <topicForm :dataRow="dataRow" v-model="dialog" />
  </div>
</template>

methods: {
      openDialog(item = {}) {
      this.dataRow = item;
      this.dialog = true;
      },
}

对话框窗体代码-->

<template>
  <div>
    <v-dialog v-model="value" max-width="500px" @click:outside="close">
      <v-card outlined class="pt-5">
        <v-form ref="form" class="px-3">
          <v-card-text class="pt-5">
            <v-row no-gutters>
              <v-text-field
                required
                outlined
                label=" Name"
                v-model="data.name"
                :rules="[rules.required]"
              ></v-text-field>
            </v-row>
            <v-row no-gutters>
              <v-textarea
                required
                outlined
                label=" Description"
                v-model="data.description"
              ></v-textarea>
            </v-row>
          </v-card-text>
        </v-form>
        <v-divider> </v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            large
            dark
            outlined
            color="success"
            @click="save"
            class="ma-3"
          >
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

  props: [
    "dataRow",
    "value",
    // ----------------------
  ],

methods: {
    save() {
      if (this.$refs.form.validate()) {
        this.$root
          .$confirm("Are you sure you want to save?")
          .then((confirm) => {
            if (confirm) {
              this.ADD_TOPIC_DATA(this.data)
                .then((data) => {
                  this.FETCH_TOPIC_DATA();
                  this.$refs.form.reset();
                  this.$refs.form.resetValidation();
                  this.close();
                })
                .catch((err) => {
                       console.log(err)
                });
            }
          });
      }
    },
    close() {
      this.$emit("input", false);
    },
}
  watch: {
    dataRow(val) {
      this.data = { ...val };
    },
  },

我遇到的问题是在添加数据后，如果我尝试通过打开对话框再次添加，必填字段显示验证错误，这里是名称！那个的图像 -->

在 Whosebug 中搜索过。发现应该用this.$refs.form.reset()。在保存方法中使用它但没有成功。也用了this.$refs.form.resetValidation()，但是不行。有什么建议吗？提前致谢。

Answer 1

这里的问题是您在打开对话框时为 dataRow 分配了新值，这会在对话框内触发验证。您还可以使用 lazy-validation 道具，它允许您仅手动触发验证。

提交后 Vuetify 重置表单

Vuetify reset form after submitting

vue.js

vuetify.js