如何解决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,};
},}
这行不通。
emailValue
作为带有 undefined
值的 ComputedRefImpl 返回。
我想我正在混合 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 的子项。
所以当使用 ggplot
组件时它不起作用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。