在vue js中使用vee-validate验证时出错

Question

我是vue.js的新手。我试图使用vee-validate库添加表单验证，我得到这些错误:

属性或方法"error "不是在实例上定义的，而是在呈现期间引用的。确保在data选项中声明响应性数据属性。

渲染函数出错:"TypeError: Cannot read property 'has' of undefined">

vue。版本= ^2.3.3

vee-validate。版本= ^3.4.5代码是:

<div class="tile is-parent">
<article class="tile is-child box">
<h1 class="title">Add new AC Default</h1>
<form>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name')}"
class="input" type="text" placeholder="Full name">
</div>
<p class="help is-danger" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
</form>
</article>
</div>

脚本如下:

import Vue from 'vue';
...
export default {
components: {
...
},
data() {
return {
form: {
entityId: '',
defaultValue: '',
displayName: '',
name: '',
},
};
},
created() {
this.getInitialData();
},
computed: {
...
},
methods: {

getInitialData() {
...
},
},
};

我在这里错过了什么?

Answer 1

您正在尝试使用errors，但它没有在您的data或prop中定义。

当你实例化VeeValidate时，你可以给它传递一个errorBagName这样的:

Vue.use(VeeValidate, {
events: 'blur',
errorBagName: 'vErrors',
});

然后在您的组件中，您可以通过vErrors.collect('name')收集错误。我还建议将错误包命名为vErrors，而不是errors，以防止潜在的冲突。