0

我正在尝试使用 VeeValidate 来验证使用 Vue 2.5 和 VeeValidate 2.1 的 Vue 表单中的字段。按照文档,我正在验证这样的字段:

<input class="form-control"
name="contact-email"
id="contact-email"
type="email"
v-model="contact-email"  
v-validate="'required|email'"
>
<span v-if="errors.has('contact-email')">{{ errors.first('contact-email') }}</span>

这会引发错误:Variable "errors" does not exist.这意味着 VeeValidate 没有正确安装。

yarn add vee-validateVeeValidate 是使用js 文件的顶部安装并添加到任何其他 Vue 代码之前的,如下所示:

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

更新:当我删除span引发错误的行并使用 Vue 浏览器插件(显示所有属性及其值)检查此 Vue 实例时,我看到 VeeValidate 自动添加了两个计算属性,errors并且fields. 两者都是看起来像这样的对象:

errors = { items: Array[0] }
fields = { student-contact-email: { changed: false, dirty: false, invalid: true, pending: false, pristine: true, required: true, touched: false,
untouched: true, valid: false, validated: false }} 

我不明白为什么errors作为计算属性存在,但在模板中却找不到。

4

1 回答 1

1

我看到 v-model 中的名称数据是“contact-email”,但是 errors.has call “email”:

<span v-if="errors.has('email')">{{ errors.first('email') }}</span>

我认为你应该解决:

<span v-if="errors.has('contact-email')">{{ errors.first('contact-email') }}</span>
于 2018-06-14T06:41:18.073 回答