Question

我是 Vue 的新手。我正在使用 Vee-Validate 进行表单验证。我想禁用该按钮，直到验证表单项并在验证表单后立即更新。

我看到的相关问题很少，但对我不起作用。

我的代码：

<template>
  <Form v-slot="{ meta }">
    <Field v-model="email" name="email" type="email" />
    <Field name="password" type="password" />
    <button :disabled="!(meta.valid && meta.dirty)"  @click="Test">ok</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";

export default {
  components: {
    Form,
    Field
  }
  // no data, no v-model!!!
};
</script>

我正在使用 meta.valid meta.dirty 来获取验证结果。它可以工作，但它不够动态：它不会在电子邮件和密码验证后立即更新按钮，用户必须将注意力转移到电子邮件/密码输入元素上，并且必须单击页面，只有然后重新计算 meta 值。

另一个问题是，一旦表单通过验证，如果用户更改电子邮件/密码以使表单无效，那么 meta.valid 不会更新，并且按钮一旦启用就永远不会被禁用。

>

我查阅了一些其他相关文章，例如 this，但我发现 error.any() 不是函数。

main.js

import {  createApp  } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { setupI18n } from './i18n'
import logger from './logger'
import { en, de, es, it, ja, ptBR, esMX, jaJP } from './locales'
import * as VeeValidate from 'vee-validate';

const i18n = setupI18n({
    globalInjection: true,
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
      en, de, es, it, ja, 
      'pt-br': ptBR, 
      'es-mx': esMX, 
      'ja-jp': jaJP
    }
  })
  
createApp(App).use(VeeValidate, {
  inject: true}).use(logger).use(i18n).use(router).mount('#app')

有人可以帮忙吗？

如何使用 Vee-Validate 禁用/启用表单验证按钮？

0 个答案: