首页 > 在使用vue-validator的时候一直提示<validator>没有注册为组件

在使用vue-validator的时候一直提示<validator>没有注册为组件

这是我用的版本

"vue": "^1.0.21",
"vue-resource": "^0.9.3",
"vue-validator": "^2.1.5"

我的入口文件

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import VueValidator from 'vue-validator'
/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App },
  http: {
    header: {
      'Content-Type': 'application/json'
    }
  }
})
Vue.use(VueResource)
Vue.use(VueValidator)

App.vue

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }
}
</script>

Hello.vue

<template>
  <div class="hello">
    <h1 v-text="msg">{{ msg }}</h1>
    <validator name="validation1">
      <form novalidate>
        <div class="username-field">
          <label for="username">username:</label>
          <input id="username" type="text" v-validate:username="['required']">
        </div>
        <div class="comment-field">
          <label for="comment">comment:</label>
          <input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
        </div>
        <div class="errors">
          <p v-if="$validation1.username.required">Required your name.</p>
          <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
        </div>
        <input type="submit" value="send" v-if="$validation1.valid">
      </form>
    </validator>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        // note: changing this line won't causes changes
        // with hot-reload because the reloaded component
        // preserves its current state and we are modifying
        // its initial state.
        msg: 'Hello World!'
      }
    }
  }
</script>

一运行就有警告,而且没有产生效果

很郁闷,望解答,刚开始学的


谢邀

入口文件不对,请把Vue.use()写在new Vue({})新建Vue实例之前。

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import VueValidator from 'vue-validator'
/* eslint-disable no-new */

Vue.use(VueResource)
Vue.use(VueValidator)

new Vue({
  el: 'body',
  components: { App },
  http: {
    header: {
      'Content-Type': 'application/json'
    }
  }
})

Vue.use(VueValidator)

【热门文章】
【热门文章】