javascript - vee-validate@4.x - 如何手动验证字段
问题描述
使用时
- vee-validate@4.4.5
- vue@3.1.4
我遇到了以下问题:
<Form @submit="onSubmit" :validation-schema="schema">
<div class="mb-3">
<label for="edit-email" class="form-label">E-mail</label>
<Field
id="edit-email"
class="form-control"
name="email"
type="text"
:validateOnInput="true"
/>
<ErrorMessage class="invalid-feedback" name="email" />
</div>
<button @click="checkEmail" type="button">Check e-mail address</button>
<!-- non-important part of the form -->
</Form>
我想手动验证 <Field />
单击按钮的时间(应该出现错误消息),然后我想使用该字段value
执行另一个操作。
我写了以下代码:
import { useFieldValue } from 'vee-validate';
// setup
setup() {
const schema = object({
email: string().required().email().label("e-mail"),
});
function verifyEmail(v) {
const emailValue = useFieldValue("email");
console.log(emailValue); // empty ComputedRefImpl
}
return {
schema,
verifyEmail,
};
},
}
这是行不通的。
以带有值的ComputedRefImplemailValue
形式返回。undefined
我想我正在混合 vee-validate 的组件和组合 API 风格。但仍然不知道如何解决这个问题。
使用此创建沙箱:https ://codesandbox.io/s/vue3-vee-validate-form-field-forked-xqtdg?file=/src/App.vue
任何帮助都感激不尽!
解决方案
根据 vee-validate 的作者: https ://github.com/logaretm/vee-validate/issues/3371#issuecomment-872969383
useFieldValue 仅用作 useForm 或 useField 的子项。
所以在使用组件时它不起作用<Field />
。
推荐阅读
- python - 通过 mac 上的堡垒主机隧道进行 python
- javascript - HTML - 列表中的列表 - 索引按钮按下
- python - 为什么从命令命令运行时诗歌的运行表现不同?
- python - 获取功能而不是链接
- angular - Angular Chart.js 同步十字准线不同步工具提示
- python - 数据框到存在/不存在数据框,其中 2 列作为逗号分隔的字符串
- sql - PostgreSQL 上不存在表 t 的约束 c,即使它存在
- php - 429 Too Many Requests Laravel 8(仅限一个帐户)
- javascript - 如何使用 d3.js 按不同变量对表格进行排序?
- python - 打印具有偶数索引号的所有列表元素,错误语句