未在实例上定义“错误”,但在渲染期间引用了“错误”

时间:2019-07-31 09:50:32

标签: vue.js vue-component vue-router vee-validate

使用Laravel和vue进行设置,并希望在某些表单上使用vee-validate

我通过NPM安装,然后将其添加到我的app.js

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

也尝试过

window.VeeValidate = require('vee-validate');
Vue.use(window.VeeValidate);

在我的组件中

<div class="form-group">
          <label for="exampleInputEmail1">Username</label>
          <input
            v-model="username"
            v-validate="'required|max:16'"
            data-vv-name="username"
            type="text"
            class="form-control"
            id="exampleInputEmail1"
            aria-describedby="Username"
          />
          <small>{{error.first('username')}}</small>
        </div>

我收到错误消息

[Vue warn]: Property or method "error" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

1 个答案:

答案 0 :(得分:3)

验证器错误对象是错误。因此应该是错误而不是错误。

 <small>{{errors.first('username')}}</small>