问题描述
我是 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,'pt-br': ptBR,'es-mx': esMX,'ja-jp': jaJP
}
})
createApp(App).use(veevalidate,{
inject: true}).use(logger).use(i18n).use(router).mount('#app')
有人可以帮忙吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)