VeeValidate 表单不会运行提交表单功能答案

【问题标题】：VeeValidate form won't run submit form functionVeeValidate 表单不会运行提交表单功能
【发布时间】：2020-09-23 04:51:42
【问题描述】：

所以，即使 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'
});

【问题讨论】：

标签： forms submit handle vee-validate

【解决方案1】：

您可以尝试在提交时添加.prevent 吗？

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

【讨论】：