VeeValidate表单无法运行提交表单功能。

Question

所以，即使ValidationProvider给了我错误，然后我输入了错误的文本，但提交表单应该运行saveAccount 。即使文本是正确的，它也没有工作。我没有错误，没有反应，然后我点击提交按钮。我使用的是veeValidate 3.3.0。

<template>
  <ValidationObserver v-slot="{ handleSubmit }">  //this and next line seems to won't work
   <q-form @submit="handleSubmit(saveAccount)" > 
         <ValidationProvider rules="secret" v-slot="{ errors }">
           <q-input
             v-model="account.password"
             outlined
             :label="$t('wizzard.password')"
             class="q-mb-sm"
             color="orange-7"
           ></q-input>
           <span>{{ errors[0] }}</span>
         </ValidationProvider>

    <ButtonsBar
      :label="$t('wizzard.Create account')"
      :nextBt="nextBt"
    />

  </q-form>
  </ValidationObserver>
</template>

<script lang="ts">
import { Component, Emit, Mixins } from 'vue-property-decorator'
import { ValidationProvider, ValidationObserver } from 'vee-validate'

...

import './utils/VeeRules'

@Component({
  components: {
    ...
    ValidationProvider,
    ValidationObserver
  }
})

export default class CreateAccount extends Mixins(QuasarStyles) {

  ...

  @Emit()
  saveAccount (): AccountType | false {
    if(this.account.email !== '' && this.account.password !== '' && this.account.password === this.account.confirmPassword){
      return this.account
    } else {
      return false
    }
  }
}

</script>

和VeeRules中的规则。

import { extend } from 'vee-validate';

export const passwordLength = extend('secret', {
  validate: value => value === 'example',
  message: 'This is not the magic word'
}); 

Answer 1

你可以尝试添加 .prevent 在提交？

<q-form @submit.prevent="handleSubmit(saveAccount)" >