重置 Vuetify 表单验证 [英] Reset Vuetify form validation

问题描述

我无法在 v-dialog 中重置 vuetify 验证.

这个代码笔是我所拥有的简化版本.
https://codepen.io/yuukive/pen/BVqpEZ

使用上面的代码，如果我这样做

(打开对话框 --> 按 SAVE 按钮 --> (验证失败) --> 按 CLOSE 按钮 --> 再次打开对话框),

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

是否可以在用户第二次打开验证之前重置验证?

new Vue({el: '#app',数据:() =>({对话:假，电子邮件规则:[v =>!! v ||'姓名是必需的']}),方法: {onSave() {如果 (!this.$refs.form.validate()) 返回对话 = 假}}})

<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>打开对话框</v-btn><v-card><v-card-title><span class="headline">电子邮件</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-容器><small>*表示必填字段</small></v-card-text><v-card-actions><v-间隔></v-间隔><v-btn color="blue darken-1" flat @click.native="dialog = false">关闭</v-btn><v-btn color="blue darken-1" flat @click.native="onSave">保存</v-btn></v-card-actions></v-form></v-card></v-对话框></v-layout></v-app>

解决方案

示例来自文档用途:

this.$refs.form.reset()

请注意，虽然 reset() 清除验证，但它也会清除输入.
您可以关注此问题以查看有关此问题的进一步更新.

所以你也许可以观察对话框值并重置表单:

观看:{对话(){this.$refs.form.reset()}}

I have trouble resetting vuetify validation in v-dialog.

This codepen is the simplified version of what I have.
https://codepen.io/yuukive/pen/BVqpEZ

With the code above, if I do

(Open dialog --> press SAVE button --> (validation fails) --> press CLOSE button --> open dialog again),

it is already validated when I open the dialog again...

Is it possible to reset validation before a user opens it the 2nd time?

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>

解决方案

Example from docs uses:

this.$refs.form.reset()

Note that while reset() clears validation, it clears input as well.
You can follow this issue to see further updates on this.

So you can perhaps watch dialog value and reset the form:

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

这篇关于重置 Vuetify 表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！