vue-validator报错Cannot read property 'required' of undefined

Question

router.js配置如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueValidator from 'vue-validator'

Vue.use(VueValidator)
Vue.use(VueRouter)

const routes = [
    { path: '/', 
      name: "login", 
      component: login,
      children: [
          { path: '', name: 'logindefault', component: signIn },
          { path: '/signin', name: 'signin', component: signIn },
          { path: '/register', name: 'register', component: register },
          { path: '/repassword', name: 'repassword', component: rePassword }
      ]
    }

vue代码如下：

<validator name="validation">
    <form novalidate>
        <div class="input-group usrname">
            <span class="input-group-addon">
                <label for="usrname">
                    <span class="fa fa-user fa-fw"></span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号
                </label>
            </span>
            <input type="text" class="form-control" id="usrname" name="usrname" v-validate:usrname="{ required: true, maxlength: 8 }" v-model="usrname" />
            <div>
                <p v-if="$validation.usrname.required">用户名不能为空！</p>
                <p v-if="$validation.usrname.maxlength">用户名长度不能超过8个字符！</p>
            </div>
        </div>
    </form>
</validator>

报错信息如下：

Uncaught TypeError: Cannot read property 'required' of undefined

Answer 1

$validation.usrname是underfined。。。

这个错误很明显，顺着这个找一下

Answer 2

我也遇到了这个问题，请问题主解决了吗，最后是怎么解决的