如何在vee-validate中清除错误对象?

时间:2017-03-07 02:04:06

标签: vue.js

我想在注销方法中清除vee-validate中的所有错误,以下代码似乎不起作用,表单中的错误仍然显示,任何想法为什么?谢谢,

sign_out: function (e) {
    console.log('sign me out')
    var self = this
    firebase.auth().signOut().then(function () {

      console.log('sign out!')         
      self.info.email = ''
      self.errors.clear()  // clear errors object of vee-validate

    }, function (error) {

      console.log('sign out failed')

    })
  },

这里有一个描述代码问题的jsFiddle,当你输入'123'时会显示一个警告,然后当你点击'clear'时,字段设置为'',而errors.clear(),是期待表格中的警告会消失,但事实并非如此:

https://jsfiddle.net/8j3z82bv/1/

7 个答案:

答案 0 :(得分:6)

使用以下方法:

this.errors.clear()

答案 1 :(得分:5)

我想出了另一个可以提供帮助的解决方案。在您的输入中,我们将添加另一个侦听器,因此它将如下所示:

<input type="email" name="email" v-model="info.email" v-validate="'required|email'" @input="validate">

然后将添加调用vee-validate函数的validate函数,这样你的vue实例将是这样的:

var app = new Vue({
    el: '#app',
    data: {
        info: { email: '' }
    },

    methods: {

        onSignin: function (e) { },
        clear_proc: function (e) {
            delete this.info.email

            this.errors.clear()
        },
        validate: function () {
          this.$validator.validateAll();
        }
    }
})

答案 2 :(得分:3)

使用以下内容:

this.$validator.clean();

答案 3 :(得分:3)

如果使用vee-validate(2.x),请使用$ validator作为其他答案清楚显示:

this.$validator.reset();

但是,如果使用最新的vee-validate(3.x),则 $ validator 对象是no longer available,并且您可以向 ValidationObserver 添加引用:

<validation-observer v-slot="{ invalid }" ref="form">
  <v-form @submit.prevent="save">
    ...
    <v-btn @click.stop="reset">Reset</v-btn>
    <v-btn type="submit" :disabled="invalid">Save</v-btn>
  </v-form>
</validation-observer>

,然后您可以按照here所述在代码中调用重置:

reset() {
  this.$refs.form.reset();
  ...
}

,或者您也可以按照here所述在 v槽上公开内置的重置功能:

<validation-observer v-slot="{ invalid, reset }" ref="form">
  <v-form @submit.prevent="save" @reset.prevent="reset">
    ...
    <v-btn type="reset">Reset</v-btn>
    <v-btn type="submit" :disabled="invalid">Save</v-btn>
  </v-form>
</validation-observer>

答案 4 :(得分:1)

我有同样的问题。我想清除错误,然后进行验证。这对我有用:

this.$validator.reset().then(resolve => {
        this.$validator.validateAll().then((isValid) => {
            if (isValid) {
                ...
            }
       })
})

答案 5 :(得分:0)

这对我有用:

this.form.name = '';
this.form.email = '';

this.$nextTick(() => {
    this.errors.clear();
    this.$nextTick(() => {
        this.$validator.reset();
    });
});

答案 6 :(得分:0)

使用this。$ refs.form.reset()在vue 2.6+中对我有效