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未正确安装。

VeeValidate是使用yarn add vee-validate安装的，并且在任何其他Vue代码之前添加在js文件的顶部，如下所示：

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作为计算属性存在但却无法在模板中找到。

Answer 1

我看到v-model中的名称数据是“contact-email”，但是errors.has称为“email”：

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

我认为你应该解决：

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

VeeValidate：模板中不存在“错误”

1 个答案: