重置Vuetify表单验证

索拉

我在v对话框中重置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>
Traxo

来自文档的示例使用:

this.$refs.form.reset()

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

因此,您也许可以查看对话框值并重置表单:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

提交后Vuetify重置表单

表单重置后重置验证(ReactiveForms)

表单提交后验证重置

响应式表单重置和表单验证

重置表单后未删除验证消息

Vuetify表单验证禁用项目

重置表单后,IE11不重新验证表单

表单重置后如何添加/删除类并重新验证?

在Angular 2中提交表单后如何重置验证

如何在提交ANGULAR 2中重置表单验证

关闭引导程序模式后如何重置angularjs的表单验证

在单击事件上重置 Angular Formly 表单验证

带有提交和重置按钮的AngularJS表单验证

清除表单时出现Vue + Vuetify验证问题

如何使用vee-validate验证vuetify stepper中的表单

如何在重置表单时隐藏html5表单验证

重置表单后,Angular 4反应式表单未清除验证

我如何自定义重置密码验证消息以及表单验证?

React Final Form 重置表单字段和验证但保留 submitSucceeded

使用新值更新验证后,如何重置表单中的输入字段失败

停止jQuery表单验证以重置由其他JavaScript填充的typeahead.js输入字段

Django内置了用于密码重置的身份验证视图-表单未显示

如何在表单重置react-final-form上禁用验证?

提交并重置后,Angular 6表单返回验证错误

jQuery验证不通过div选择器将表单重置为初始状态

将表单验证码重置为递归,直到执行submit()之后

默认浏览器表单验证在 Vuetify v-form 中不起作用

使用Vue测试工具和Jest测试Vuetify表单验证

Vuetify 的自定义表单验证显示错误 _this.$refs[f].validate 不是函数