vue.js 如何清除vee-validate中的错误对象?

wpx232ag  于 2022-11-17  发布在  Vue.js
关注(0)|答案(9)|浏览(297)

我想清除 checkout 方法中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/

iszxjhcz

iszxjhcz1#

我想出了另一个可能有帮助解决方案。在您的输入中,我们将添加另一个侦听器,因此它将是这样的:

<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();
        }
    }
})
bfnvny8b

bfnvny8b2#

版本(3.x)
this.$refs.observer.reset();

k4aesqcs

k4aesqcs3#

这对我很有效:

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

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

piok6c0g4#

如果使用vee-validate(2.x),则使用$validator,因为其他答案清楚地表明:

this.$validator.reset();

但是,如果使用最新的vee-validate(3.x),则**$validator**对象将不再可用,您可以向 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>

然后您可以在代码中调用重置,如下所示:

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

或者您可以在v-slot上公开内置的reset函数,如下所示:

<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>
quhf5bfb

quhf5bfb5#

使用以下方法:
this.errors.clear()

dluptydi

dluptydi6#

请使用以下选项:

this.$validator.clean();
envsm3lx

envsm3lx7#

我遇到了同样的问题。我想清 debugging 误,然后验证。这对我很有效:

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

km0tfn4u8#

使用这个.$refs.form.reset()它在vue 2. 6+中对我有效

d4so4syb

d4so4syb9#

使用vee-validate(4.x),对于电子邮件验证,

const { value, resetField } = useField<string>('email', yup.string().email());

const resetButtonAction = () => {
    resetField();
}

导航至docs以获取更多参考。

相关问题