vue.js - VeeValidate：模板中不存在“错误”

Question

我正在尝试使用 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作为计算属性存在，但在模板中却找不到。

标签： vue.jssymfony-3.4vee-validate

Answer 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>