重置 Vuetify 表单验证

Question

我在v-dialog中重置vuetify验证有困难。

这个codepen是我所拥有的内容的简化版本。
https://codepen.io/yuukive/pen/BVqpEZ

使用上述代码，如果我执行以下操作：

(打开对话框-->按保存按钮-->（验证失败）-->按关闭按钮-->再次打开对话框),

当我再次打开对话框时，它已经被验证过了...

有可能在用户第二次打开对话框之前重置验证吗？

new Vue({
  el: '#app',
  data: () => ({
    dialog: false,
    emailRules: [v => !!v || 'Name is required']
  }),
  methods: {
    onSave() {
      if (!this.$refs.form.validate()) return
      dialog = false
    }
  }
})

<div id="app">
  <v-app id="inspire">
    <v-layout row justify-center>
      <v-dialog v-model="dialog" persistent max-width="500px">
        <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
        <v-card>
          <v-card-title>
            <span class="headline">Email</span>
          </v-card-title>
          <v-form ref="form">
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12>
                    <v-text-field label="Email" required :rules="emailRules"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
              <small>*indicates required field</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" flat @click.native="dialog = false">Close</v-btn>
              <v-btn color="blue darken-1" flat @click.native="onSave">Save</v-btn>
            </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </v-app>
</div>

- sora

Answer 1

文档示例使用：

this.$refs.form.reset()

请注意，reset() 会清除验证和输入。
您可以关注此问题以了解更多更新。

因此，您可以观察对话框值并重置表单：

watch: {
    dialog() {
        this.$refs.form.reset()
    }
}

- Traxo

---

如果我有另一个表单，我可以使用重启或验证的方法，例如：this.$refs.formNew.reset()。 - JG_GJ

Answer 2

resetValidation() 只会清除验证错误，reset() 还会清除输入字段。

- ego

Answer 3

this.$refs.form.reset() 在 JavaScript 中可能有效，但对于 TypeScript 编译器会报错。尽管在 serve 运行期间，您只能在终端中看到错误而不会使应用程序崩溃，但实际上当您尝试 build 应用程序时，它会导致应用程序崩溃。

创建一个新变量并将其分配为 any 类型可以解决问题，以下是一个示例:

const refForm: any = this.$refs.form;
refForm.reset();

- Daniel Danielecki

---

我相信这也能满足你的需求：(this.$refs.form as HTMLFormElement).resetValidation()。 - Tim Rutter