Vue.js 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>

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

更新： 当我删除引发错误的范围线并使用显示所有属性及其值的Vue浏览器插件检查此Vue实例时，我看到VeeValidate自动添加了两个计算属性：错误和字段。 两者都是如下所示的对象：

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

---

我不明白为什么错误作为计算属性存在，但在模板中找不到。

我看到v-model中的名称数据是联系电子邮件，但有错误。有呼叫电子邮件：

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

我认为你应该修复：

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

---

非常感谢。在我的代码中，变量名实际上是正确的，但我在文章中犯了一个错误。我编辑了这篇文章以修正错误并添加更新。