vee-validate@4.x - 如何手动验证字段答案

【问题标题】：vee-validate@4.x - how to manually validate fieldvee-validate@4.x - 如何手动验证字段
【发布时间】：2021-09-14 08:55:56
【问题描述】：

使用时

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 以 ComputedRefImpl 形式返回，并带有 undefined 值。

我想我正在混合 vee-validate 的组件和组合 API 风格。但是还是不知道怎么解决这个问题。

使用此创建沙箱：https://codesandbox.io/s/vue3-vee-validate-form-field-forked-xqtdg?file=/src/App.vue

任何帮助将不胜感激！

【问题讨论】：

标签： javascript vue.js vuejs3 vee-validate

【解决方案1】：

根据 vee-validate 的作者： https://github.com/logaretm/vee-validate/issues/3371#issuecomment-872969383

useFieldValue 仅作为 useForm 或 useField 的子项。

所以在使用<Field />组件时它不起作用。

【讨论】：