"error" 未在实例上定义但在渲染期间被引用

Question

使用 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.

Answer 1

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

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

"error" 未在实例上定义但在渲染期间被引用

"error" is not defined on the instance but referenced during render

vue.js

vue-router

vue-component

vee-validate